Angular 2將HTML注入內聯模板

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>