动态添加 ng 模板

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>

';

和在应用程序中.html

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

但这个应用程序只在DOM中呈现h1标签(没有ng模板(

请帮助我动态添加ng模板，以便 #else 块，*ngif也可以工作。

Answer 1

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

您应该为这种类型的用例使用模板出口。

<ng-template #heading let-heading>
  <h1>
    {{heading}}
  </h1>
</ng-template>
<ng-container *ngTemplateOutlet="heading; context: ContextObj">
</ng-container>

官方角度文档ng模板出口
或一篇很棒的博客文章 ngTemplateOutlet