angular - 在多个位置输出/渲染模板，与 ngIf 条件分开

Question

假设在 Angular 模板中，我想根据某些条件选择渲染嵌入 View ( <ng-template> ) 的位置。

<ng-template #foo>
  Hello World.
</ng-template>

<p *ngIf="isBar; else baz">
  Bar:  <!-- Want to insert #foo here, sometimes -->
</p>
<div #baz>
  Baz:  <!-- Want to insert #foo over here instead, other times -->
</div>

我用过 else *ngIf 的一部分插入其他地方定义的模板。我可以写*ngIf="false; else #foo"渲染嵌入 View 模板，但我觉得这不是必需的。

<p *ngIf="isBar; else baz">
  Bar:  <ng-container *ngIf="false; else foo"></ng-container>
</p>
<div #baz>
  Baz:  <ng-container *ngIf="false; else foo"></ng-container>
</div>

Answer 1

您正在寻找NgTemplateOutput，它“从准备好的TemplateRef插入嵌入 View 。”

https://angular.io/api/common/NgTemplateOutlet

<ng-template #foo>
  Hello World.
</ng-template>

<p *ngIf="isBar; else baz">
  Bar:  <ng-container *ngTemplateOutlet="foo"></ng-container>
</p>
<div #baz>
  Baz:  <ng-container *ngTemplateOutlet="foo"></ng-container>
</div>