Angular2 Pass Richtlinie in Subchild

Question

Ich baue eine einfache Liste UI-Komponente, die Elemente enthält, die auch Komponenten sind:

AppComponent -> ListComponent -> ListItemComponent

Ich mag diese Liste verschiedene Arten von Listenelement Komponenten sichtbar zu machen.

Zum Beispiel 2 Arten von Listenelementen:

@Component({ 
    selector: 'list-item', 
    template: 'This is a PRODUCT!' 
}) 
export class ProductListItemComponent { } 

@Component({ 
    selector: 'list-item', 
    template: 'This is a PERSON!' 
}) 
export class PersonListItemComponent { } 

Also, wenn ich meine app Komponente initialisieren:

import {ListComponent} from '...'; 
import {ProductListItemComponent} from '...'; 

@Component({ 
    selector: 'list-item', 
    template: ` 
    <list></list> 
    `, 
    directives: [ 
    ListComponent, 
    ProductListItemComponent 
    ] 
}) 
export class AppComponent { } 

Es funktioniert nicht (natürlich), weil meine ListComponent Element Komponente (Richtlinie) nicht von App-Komponente erhalten.

@Component({ 
    selector: 'item', 
    template: ` 
    <ul><li *ngFor=...> 
     <list-item></list-item> 
    </li></ul> 
    ` 
}) 
export class ListComponent { } 

Was soll ich tun, wie es funktioniert? Vielen Dank im Voraus!

Answer 1

So, hier ist die letzte Version, die ich bauen basierend auf Angular 2 dynamic tabs with user-click chosen components

(Danke Gunter!)

Die Lösung besteht darin, eine dynamische Komponente als Zwischenprodukt zwischen Listen- und Listenelementen verschiedener Typen zu verwenden.

import { 
    Component, 
    ComponentFactory, 
    ComponentRef, 
    Input, 
    ViewContainerRef, 
    ComponentResolver, 
    ViewChild} from '@angular/core'; 

@Component({ 
    selector: 'dynamic-list-item', 
    template: `<div #target></div>` 
}) 
export class DynamicListItem { 

    @ViewChild('target', {read: ViewContainerRef}) target; 
    @Input() Type: any; 
    @Input() Item: any; 
    cmpRef: ComponentRef<any>; 
    private isViewInitialized: boolean = false; 

    constructor(private resolver: ComponentResolver) { } 

    updateComponent() { 
    if(!this.isViewInitialized) return; 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    } 
    this.resolver.resolveComponent(this.Type).then((factory:ComponentFactory<any>) => { 
     this.cmpRef = this.target.createComponent(factory); 
     this.cmpRef.instance.Item = this.Item; 
    }); 
    } 

    ngOnChanges() { 
    this.updateComponent(); 
    } 

    ngAfterViewInit() { 
    this.isViewInitialized = true; 
    this.updateComponent(); 
    } 

    ngOnDestroy() { 
    if(this.cmpRef) { 
     this.cmpRef.destroy(); 
    }  
    } 

} 

Plunker example RC4

Answer 2

Vor allem - ist es Ihr echter Code oder Copy-Paste? Weil ich sehe, dass fast alle Ihre Komponenten den Selektor 'list-item' haben, was falsch ist. Es sollte uniq sein.

Und die zweite, über das Problem an sich - Sie sollten ProductListItemComponent und PersonListItemComponent Deps rechts zu Ihrem ListComponent hinzufügen, wenn Sie möchten, dass sie innerhalb der Liste rendern. Wie folgt aus:

import {PersonListItemComponent} from '...'; 
import {ProductListItemComponent} from '...'; 

@Component({ 
selector: 'list', 
template: ` 
    <ul><li *ngFor=...> 
    <list-item></list-item> 
    </li></ul> 
`, 
directives: [ 
    PersonListItemComponent, 
    ProductListItemComponent 
] 
}) 
export class ListComponent { ...} 

und für Ihre AppComponent Sie hinzufügen müssen für 'Richtlinien' prop nur ListComponent