角動態模板

Question

我有一個代碼片段，如下所示。在這裏我只放了2個部分。我的html文件中有6個這樣的部分。從這裏開始<div *ngIf="questionSubNumber=='a'">正在重複部分。所以我需要將它放到通用模板，我可以在需要時使用它。可以告訴我一個更好的方法嗎？我必須將questionNumber,groupQuestion?.description等動態數據也傳遞到該模板中。

的.html

<div *ngIf="question?.type=='date' && !isSurveyDone && isShow"> 

     <div *ngIf="questionSubNumber=='a'">//need to put this into template 
     <ion-list> 
      <ion-list-header text-wrap> 
      <span class="number">{{questionNumber}}</span> {{groupQuestion?.prompt}} 
      <div class="description">{{groupQuestion?.description}}</div> 
      </ion-list-header> 
     </ion-list> 
     </div>//need to put this into template 

     <ion-list> 
     <ion-list-header text-wrap> 
     //other html code 
     </ion-list> 
    </div> 

<div *ngIf="question?.type=='textfield' && !isSurveyDone && isShow"> 

     <div *ngIf="questionSubNumber=='a'"> 
     <ion-list> 
      <ion-list-header text-wrap> 
      <span class="number">{{questionNumber}}</span> {{groupQuestion?.prompt}} 
      <div class="description">{{groupQuestion?.description}}</div> 
      </ion-list-header> 
     </ion-list> 
     </div> 

     <ion-list no-lines> 
     //more html  
     </ion-list> 
    </div> 

Answer 1

OP的答案：

的.html

<group-question [questionSubNumber]="questionSubNumber" 
[questionNumber]="questionNumber" [groupQuestion]="groupQuestion"></group- 
question> 

.TS

import { Component, Input } from '@angular/core'; 

@Component({ 
    selector: 'group-question', 
    templateUrl: 'group-question.html' 
}) 
export class GroupQuestionComponent { 

    @Input() questionSubNumber: string; 
    @Input() questionNumber: string; 
    @Input() groupQuestion: any; 

    constructor() { 
    } 

} 

原來的答案：

您可以用含有HTML部分模板來創建新的組件，你帶我們：

<div *ngIf="model.questionSubNumber=='a'"> 
    <ion-list> 
    <ion-list-header text-wrap> 
     <span class="number">{{model.questionNumber}}</span>{{model.prompt}} 
     <div class="description">{{model.description}}</div> 
    </ion-list-header> 
    </ion-list> 
</div> 

傳遞一個對象吧：

<foo-bar [model]="obj"></foo-bar> 

哪裏該對象被定義爲

{ 
    questionSubNumber: questionSubNumber, 
    questionNumber: questionNumber, 
    prompt: groupQuestion?.prompt, 
    description: groupQuestion?.description 
}