在 Angular TS 文件中返回组件选择器（Angular 2+）

Question

Say I have a method in my TS file that returns some html that gets injected into the template. I would like to include another component in the return but I cant get it to work.

For example say I have the following method in my TS file:

returnComponent() {
   return `<my-component></my-component>`
}

Every time I run this method, it seems to only return the html tags but not the actual component. So after running the method I get

<div>
   <my-component>
      <!-- nothing here -->
   </my-component>
</div>

And I would like to get

<div>
   <my-component>
      <!-- the contents of 'my-component' -->
   </my-component>
</div>

What am I missing? or is this not even possible?

Answer 1

What actually you are looking for is dynamic template. You cannot put the dynamic template as string value. The template must reside inside the html of any component and you can take the reference of that template ng-template .

So you need to change your implementation. Its not pretty simple process as you thought.

Follow this article https://medium.com/@DenysVuika/dynamic-content-in-angular-2-3c85023d9c36