Question

我有一个代码片段，如下所示。这里我只放了两个部分。我的html文件中有六个这样的部分。从这里开始<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
}

角动态模板

1 个答案: