动态添加ng-template

Question

我想在HTML中动态添加以下内容。

<ng-template #elseblock *ngIf="var">
    <h1>
        {{heading}}
    </h1>
</ng-template>

我使用下面的方法来实现这一点。

在app.component.ts文件中：

htmldata: any = `<ng-template #elseComponent *ngIf="var">
<h1>
  {{ heading }}
</h1>

`；

在app.component.html中

 <div [innerHTML]="htmldata"> </div>

但是这种方法只在DOM中呈现h1标记(没有ng模板)。

请帮我动态添加ng-template，以便#else block，*ngIf也能工作。

Answer 1

根据我对你问题的理解，你想做内容投影。

对于这种用例，您应该使用模板出口。

​

<ng-template #heading let-heading>
  <h1>
    {{heading}}
  </h1>
</ng-template>


<ng-container *ngTemplateOutlet="heading; context: ContextObj">
</ng-container>

​

官方Angular文档ngTemplateOutlet

或者在ngTemplateOutlet上发表一篇很棒的博客文章