How to inject a service into a dynamic component with Angular2

Question

I have a component that dynamically loads another component using DynamicComponentLoader. However, the dynamic component needs to have a service injected. However, I'm unsure how to go about this. I see from Angular.io docs that DynamicComponentLoader accepts a ResolvedProvider array.

I've tried to get a provider by doing:

var provider = provide(ManagerService, {useExisting: ManagerService});
dcl.loadIntoLocation(this.data.template, this.er, "content",[provider]);

This doesn't seem to work. You can see an example on plunker.

On the plunker example, you can see that the Info component loads (because it isn't requiring the service) but the Alternate component won't load.

I'm a little confused because the service is being injected at the root component so I thought that it would automatically be injected on every child component when it was called for.

How do I get this service injected?

TGH · Accepted Answer · 2016-04-08 04:02:55Z

1

It shouldn't be any different than normal DI

this.dynamicComponentLoader.loadIntoLocation(MyComponent, this.elementRef, "content")


class MyComponent{
  constructor(someService:SomeService){}//injected here when instantiated
}

If your dynamically loaded component injects services in the constructor it works like normal DI.

Make sure the service is registered in some provider array though. Either at the component level or higher up in the chain (parent or bootstrap)

edited Apr 8, 2016 at 4:02

answered Apr 8, 2016 at 3:56

TGH

39.4k13 gold badges106 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RHarris Over a year ago

That's what I thought. Did you have a look at the plunker example. As you can see, it clearly isn't being injected and as far as I can see, I've set everything up correctly.

Collectives™ on Stack Overflow

How to inject a service into a dynamic component with Angular2

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related