각도 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> 

I 중첩 템플릿에 템플릿에 다른 템플릿을 전달할 수있는 방법이 :

는 내가 인라인 템플릿은 다음과 같은 방법을 구현해야?

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>