Mehrere Templates mit mehreren Winkeln an Komponente übergeben

Question

Ich versuche, eine Komponente zu erstellen, die mehrere Vorlagen als Eingaben akzeptiert. Dies ist das Beispiel, das ich habe:

@Component({ 
    selector: 'data-list', 
    styles: [ 
     require('./data-list.component.scss') 
    ], 
    template: ` 
     <ng-template 
      *ngFor="let item of itemsData" 
      ngFor let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate" 
     ></ng-template> 
    ` 
}) 

export class DataListComponent { 
    @Input() itemsData: any[]; 
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>; 
} 

Wie Sie sehen können, ist es eine ziemlich einfache Komponente, die ich ausprobiere. Diese Komponente akzeptiert einfach die Daten der anzuzeigenden Artikel sowie die Vorlage des Artikels. Diese Komponente kann wie so verwendet werden:

<data-list [itemsData]="data"> 
    <ng-template let-item> 
     <h1>{{ item.header }}</h1> 
     <div>{{ item.content }}</div> 
    </ng-template> 
</data-list> 

Wie oben gezeigt ich die Vorlage mich vorbei mit ng-content die dann von den DataListComponent mit @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>; gelesen wird.

Meine Frage ist, ob es möglich ist, mehrere Vorlagen an eine Komponente zu übergeben.

Als ein Beispiel würde man die Vorlage für die Artikel übergeben, aber eine andere Vorlage wird benötigt, falls es der erste Artikel ist. Dies würde bedeuten, dass die Prüfung des ersten Artikels in der DataListComponent erfolgen würde, aber dann eine Vorlage verwenden, die von der Komponente spezifiziert wurde, die sie verwendet.

Einfaches Beispiel:

Ich kann wie so etwas tun dafür sorgen:

@Component({ 
    selector: 'data-list', 
    styles: [ 
     require('./data-list.component.scss') 
    ], 
    template: ` 
     <span *ngFor="let item of itemsData; let i = index" > 
      <ng-template *ngIf="i > 0; else nextTmpl" 
       ngFor let-item [ngForOf]="[item]" [ngForTemplate]="itemTemplate" 
      ></ng-template> 
     </span> 
     <ng-template #nextTmpl> 
      Next 
     </ng-template> 
    ` 
}) 

jedoch wie so die "Next Template" wird nicht durch die Komponente angegeben Verwenden Sie die DataListComponent und wird daher immer die gleiche Vorlage sein.

Answer 1

Ich löste das gleiche Problem durch den String-Selektor zur Verfügung, die ContentChild Dekorateur verwenden.

Sie müssen Template-Variablen angeben, wenn Sie Ihre Daten-Liste Komponente:

<data-list [itemsData]="data"> 
    <ng-template #firstItemTemplate let-item> 
     <h1 style="color:red;">{{ item.header }}</h1> 
     <div>{{ item.content }}</div> 
    </ng-template> 
    <ng-template #standardTemplate let-item> 
     <h1>{{ item.header }}</h1> 
     <div>{{ item.content }}</div> 
    </ng-template> 
</data-list> 

Dann in Ihrer Datenliste Komponentenklasse, die Template-Variablen auf lokale Variablen auf der Komponente zuweisen:

@Input() itemsData: any[]; 
@ContentChild('firstItemTemplate') firstItemTemplate: TemplateRef<ElementRef>; 
@ContentChild('standardTemplate') standardTemplate: TemplateRef<ElementRef>; 

Danach können Sie die übergebenen Vorlagen aus Ihrer Dateilistenkomponente rendern.

@Component({ 
    selector: 'data-list', 
    styles: [ 
     require('./data-list.component.scss') 
    ], 
    template: ` 
     <span *ngFor="let item of itemsData; let i = index" > 
      <ng-template *ngIf="i == 0; else nextTmpl" 
       ngFor let-item [ngForOf]="[item]" [ngForTemplate]="firstItemTemplate" 
      ></ng-template> 
      <ng-template #nextTmpl 
       ngFor let-item [ngForOf]="[item]" [ngForTemplate]="standardTemplate" 
      ></ng-template> 
     </span> 
    ` 
}) 

Answer 2

Versuchen Sie es stattdessen.

@Component({ 
    selector: 'data-list', 
    styles: [ 
     require('./data-list.component.scss') 
    ], 
    template: ` 
     <ng-template ngFor [ngForOf]="itemsData" [ngForTemplate]="itemTemplate"></ng-template> 
    ` 
}) 

export class DataListComponent { 
    @Input() itemsData: any[]; 
    @ContentChild(TemplateRef) itemTemplate: TemplateRef<ElementRef>; 
}