角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>