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

Ale*_*lor 2 angular-template angular

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

<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>
Run Code Online (Sandbox Code Playgroud)

我使用了elsean 的一部分*ngIf来插入在其他地方定义的模板。我可以编写*ngIf="false; else #foo"渲染嵌入视图模板,但我觉得这不是必要的。

<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>
Run Code Online (Sandbox Code Playgroud)

Ale*_*lor 5

您正在寻找NgTemplateOutput“插入已准备好的嵌入视图TemplateRef”。

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>
Run Code Online (Sandbox Code Playgroud)