角度动态模板

Question

我有一个代码片段，如below.Here所示，我只放了两个节。我的html file.Starting中有六个这样的部分，从这里开始，<div *ngIf="questionSubNumber=='a'">在重复part.So，我需要把它放到一个通用模板中，当我需要it.Can时，我可以使用它，您告诉我一个更好的方法吗？我也必须将动态数据(如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
}