Question

我正在尝试将html注入内联模板。主要是因为我懒惰而且不想制作组件。

我有一个内联模板，按以下方式实现：

  <ion-slide *ngFor="let entity of serviceRequests">
    <ion-item>
      <ion-col>
        <ion-note>[Skill Name]{{skillTypeOptions.resolveName(entity.skillId)}}</ion-note>
      </ion-col>
    </ion-item>
    <template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity.Offer, title: 'Offer'}">
    </template>
    <template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity.Counter, title: 'Counter'}">
    </template>
  </ion-slide>
</ion-slides>

<template #offerTemplate let-entity="entity" let-title="title">
  <ion-card>
    <ion-item>
      <ion-row>
        <ion-col>
          <ion-note>{{title}}</ion-note>
        </ion-col>
        <ion-col>
          <ion-note>For {{entity.price}} $</ion-note>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-card-content>
      {{ entity.messageText }}
    </ion-card-content>
  </ion-card>
</template>

有没有办法可以将另一个模板传递给模板来嵌套模板？

Answer 1

我想出了怎么做。您只需将模板作为参数传递即可首先将参数添加到父模板let-footerTemplate="footerTemplate"：

<template #offerTemplate let-entity="entity" let-title="title" let-footerTemplate="footerTemplate">
  <ion-card>
    <ion-item>
      <ion-row>
        <ion-col>
          <ion-note>{{title}}</ion-note>
        </ion-col>
        <ion-col>
          <ion-note>For {{entity.price}} $</ion-note>
        </ion-col>
      </ion-row>
    </ion-item>
    <ion-card-content>
      {{ entity.messageText }}
    </ion-card-content>
    <ion-item>
      <template [ngTemplateOutlet]="footerTemplate" [ngOutletContext]="{entity: entity}">
      </template>
    </ion-item>
  </ion-card>
</template>

然后，您可以再次在ngTemplate指令中显示模板变量。用法看起来像这样：

<template [ngTemplateOutlet]="offerTemplate" [ngOutletContext]="{entity: entity, title: 'Counter', footerTemplate:footerTemplate}">
</template>

Angular 2将HTML注入内联模板

1 个答案: