如何通过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)

本会的工作，但我需要将数据绑定到喷射系统，因此我不知道这是正确的方式。

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.

另一种方式来设置的数据是使用承诺：

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;
  });

这也将工作，但该模型为空（或伪值）初始化过程中，这可能是与@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屋！