web-dev-qa-db-de.com

Angular Übergeben Sie mehrere Vorlagen an Component

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, ist es eine ziemlich einfache Komponente, die ich ausprobiere. Diese Komponente übernimmt lediglich die Daten der anzuzeigenden Artikel sowie die Vorlage des Artikels. Diese Komponente kann folgendermaßen 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, übergebe ich die Vorlage mit ng-content, der dann von der 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 Beispiel würde man die Vorlage für die Elemente übergeben, aber für den Fall, dass es das erste Element ist, wird eine andere Vorlage benötigt. Dies würde bedeuten, dass die Prüfung des ersten Elements in der DataListComponent durchgeführt wird, dann jedoch eine Vorlage verwendet wird, die von der Komponente angegeben wird, die sie verwendet.

Einfaches Beispiel:

 enter image description here

Ich kann so etwas tun, um dem entgegenzukommen:

@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>
    `
})

Wie auch immer, die "Nächste Vorlage" wird von der Komponente nicht mit der DataListComponent angegeben und ist daher immer dieselbe Vorlage.

5
Daniel Grima

Ich habe das gleiche Problem mit dem String-Selektor gelöst, der dem ContentChild-Dekorator zur Verfügung steht.

Sie müssen Vorlagenvariablen angeben, wenn Sie Ihre Datenlistenkomponente verwenden:

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

Weisen Sie dann in Ihrer Datenlisten-Komponentenklasse die Vorlagenvariablen lokalen Variablen in der Komponente zu:

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

Danach können Sie die übergebenen Vorlagen aus Ihrer Datenlistenkomponente 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>
    `
})
14
aleroy

Versuchen Sie dies 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>;
}
1
Dmitrij Kuba