角动态模板

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 
}