Angular模板中的可重用片段

发布时间：2020-12-17 17:03:14 所属栏目：安全来源：网络整理

导读：我们现在可以使用其他代码段,指的是 ng-template： div *ngIf="condition; else not" Condition satisfied. ng-template #not Condition not satisfied. /ng-template/div 我希望能够在* ngIf的上下文之外引用片段 – 类似于 divDIV1 ng-template-call templ

我们现在可以使用其他代码段,指的是< ng-template>：

<div *ngIf="condition; else not">
  Condition satisfied.
  <ng-template #not>
    Condition not satisfied.
  </ng-template>
</div>

我希望能够在* ngIf的上下文之外引用片段 – 类似于

<div>DIV1 <ng-template-call template="shared"></ng-template-call></div>
<div>DIV2 <ng-template-call template="shared"></ng-template-call></div>

<ng-template #shared>This is a shared snippet.</ng-template>

写上我所谓的ng-template-call的正确方法是什么？

是的,我知道我可以把它变成一个单独的组件,但它没有达到那个水平.我总是可以写：

<div *ngIf="false; else shared">

但这看起来很笨拙.

解决方法

我认为Transclusions正是您所寻找的

这是一个示例：

<ng-container [ngTemplateOutlet]="reusable"></ng-container>

<ng-template #resusable>...</ng-template>

供参考：https://toddmotto.com/transclusion-in-angular-2-with-ng-content

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!