1

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

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

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

Thomas Frick
  • 189
  • 1
  • 2
  • 12

1 Answers1

1

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.

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.

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.

Ben Wells
  • 363
  • 3
  • 8
  • Ben, please forgive the tangent: it sounds like you may be addressing similar technical requirements to what I am trying to accomplish, would you please check if you have a ready answer to this question: http://stackoverflow.com/questions/37043190/routable-component-data-tree-with-adjacent-detail-pane – shannon May 05 '16 at 06:17