如何通过DynamicComponentLoader向@Component提供数据? [英] How to provide data to a @Component through DynamicComponentLoader?

问题描述

如果可能的话，我需要通过 DynamicComponentLoader 向组件提供视图数据，但是为此，我需要绑定数据.

I need to provide view-data to a Component through DynamicComponentLoader, if possible through the constructor, but for that I need to bind the data.

var bindings = Injector.resolve([bind(Model).toValue(viewModel)]);
this.loader.loadIntoLocation(component, eleRef, anchor, bindings)

这可以工作，但是我需要将数据绑定到Injection-System中，因此我不确定这是否正确.

This would work, but I need to bind the data into the Injection-System and thus I'm not sure if that is the right way.

设置数据的另一种方法是使用promise:

another way to set the data is to use the promise:

this.loader.loadIntoLocation(component, eleRef, anchor).then(componentRef=> {
  var comp:AbstractComponentBase = componentRef.instance;
  comp.model = viewModel;
});

这也可以工作，但是初始化期间模型为 null (或伪值)，这可能是 @ViewChildren 和 afterViewInit()的问题.

This would also work, but the model is null (or pseudo value) during initialization and this could be a problem with @ViewChildren and afterViewInit().

还有另一种方法可以向使用 DynamicComponentLoader 创建的组件提供数据吗?

Is there another way to provide data to the component created with DynamicComponentLoader?

推荐答案

我正在尝试一个页面容器组件，该组件需要响应路由更改以支持类似多文档界面的功能.我所有的路线都映射到该公共容器组件，并且页面的标识是通过RouteData定义的.我还有一个通用的页面组件(以支持我正在转换的应用程序中基于遗留的基于jquery的页面)，该组件将动态创建，并将RouteData注入其构造函数中.

I'm experimenting with a page container component that needs to respond to route changes to support a multi-document-interface like capability. All of my routes are mapped to this common container component and the identity of the page is defined with RouteData. I also have a common page component (to support legacy jquery-based pages from the app I'm converting) that will be dynamically created and RouteData is being injected in its constructor.

当我意识到在第一个页面加载之后，后续的路由更改未导致相应的RouteData在公共页面组件的新实例中可用时，我遇到了类似的需求.在每次路线更改时，新页面实例将看到与第一页(而不是当前页面)相对应的路线数据值.

I ran into a similar need when I realized that after the first page load, subsequent route changes did not result in the corresponding RouteData being available in new instances of the common page component. On each route change, the new page instance would see route data values corresponding to the first page, not the current.

要解决此问题，我明确更改了RouteData提供程序，该提供程序可用于我的动态创建页面，如下所示:

To fix this I explicitly change the RouteData provider that is made available to my dynamically created page like this:

var providers = Injector.resolve([new Provider(RouteData, { useValue: next.routeData })]);
this.loader.loadIntoLocation(LegacyPanelComponent, this.element, 'panels', providers)
    .then(componentRef => this.setActiveRoute(nextRoute, componentRef));

我认为您可以使用类似的方法，通过提供自定义类实例作为提供程序来将数据传递到动态组件.

I think you could use a similar approach to pass data to your dynamic component with a custom class instance made available as a provider.

这篇关于如何通过DynamicComponentLoader向@Component提供数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！