Angular dynamische Vorlage

Question

Ich habe ein Code-Snippet wie unten gezeigt.Hier habe ich nur 2 Abschnitte.Ich habe sechs solche Abschnitte in meiner html Datei.Start von hier <div *ngIf="questionSubNumber=='a'"> ist Teil zu wiederholen.So muss ich das in eine setzen generische Vorlage, wo ich das verwenden kann, wenn ich es brauche. Können Sie mir einen besseren Ansatz dafür geben? Ich muss dynamische Daten wie questionNumber, groupQuestion?.description usw. in diese Schablone auch übergeben.

.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

OPs Antwort:

.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() { 
    } 

} 

Ursprüngliche Antwort:

Sie neue Komponente erstellen können mit Vorlage des HTML-Teil enthält, die Sie uns zeigen:

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

Geben Sie ein Objekt, um es:

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

wo Das Objekt ist definiert als

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