Angular使用变量或循环创建选择器标记<app-component>

Question

我需要使用变量制作app.component.html的选择器标签。

假设变量名称为：componentVar:string

我需要我的app.component.html：

<componentVar></componentVar>或<app-componentVar></app-componentVar>

Answer 1

您可以在ViewcontainerRef中动态创建组件，如下所示：

https://stackblitz.com/edit/angular-4asbmc

（不要忘记在你的应用程序模块的entryComponents中添加你想要在你的dom中动态注入的组件）

一旦您能够插入组件，您就可以管理哪些组件必须插入您的条件。

修改

您可以迭代一个看起来像这样的组件数组：

let componentArray = [HeaderComponent, BannerComponent, FooterComponent];

然后遍历此数组，调用在viewcontainer引用中插入组件的方法。

  createComponent(component) {
    const factory = this.factoryResolver.resolveComponentFactory(component);
    const componentRef = factory.create(yourViewContainerRef.parentInjector);
    yourViewContainerRef.insert(componentRef.hostView);
  }

虽然从应用程序组件html模板中调用组件会更容易，但在模板中有这样的内容：

<app-header *ngIf="yourConditions..."></app-header>
<app-banner *ngIf="otherConditions..."></app-banner>
<!-- and so on.... -->