如何通过服务在另一个组件中注入/渲染 angular 组件

Question

I have few common components (say C1, C2, C3) and this could be rendered in any of my screens (say S1,S2 and S3). In each screen, I have a placeholder( <div id="common-component-placeholder"></div> ) for common component.

Now, I have a service that will run everytime a NavigationEnds and will do a simple business logic(let say it returns C1) that will tell what component to be loaded in a screen.

What I need to know is, how to inject the C1 into S1 via a service

Answer 1

You'll want to take a look at the ComponentFactoryResolver . The full (official) guide is at the angular.io - I think it describes everything very well so I will not copy paste all the information.

Basically, you'll have to inject your common service into the S1, S2 and S3. That service will have a method that will accept a viewContainerRef , and will the generate the component (C1, C2, C3 based on your business logic) using the factory into that viewContainerRef .

One thing to have in mind - when using factory you'll want to remember that unless you explicitly call destroy() method (or use clear() on it's parent 'viewContainerRef' if I remember correctly, but better check it yourself) it will not call OnDestroy lifecycle hook. This is by design, so you'll have to take care of that (since your C1, C2 and C3 might have some logic that needs clearing when they are destroyed).