Übergeben von Komponenten in Angular2

Question

Sagen wir, ich möchte sehr abstrakt und modular werden, und ich möchte Komponenten als Eingabe für meine untergeordneten Komponenten übergeben.

Ist das möglich?

Ich verstehe, dass ich die Eingänge übergeben und die Komponente intern erstellen kann, aber manchmal möchte ich andere/Komponenten übergeben, sonst würde ich den Code für jede Komponente anpassen und ich kann nicht abstrakt über die Operation sein.

Zum Beispiel sagen wir, ich habe Komponente P als Eltern und C als Kind, ich habe einen bestimmten Zweck für C wie Design und ich möchte C als eine wiederverwendbare Komponente für immer wenn ich diese bestimmte implementieren möchten Design mit Elementen im Inneren.

Nun, wenn ich C (zwei separate Elemente) haben möchte, um zwei verschiedene Komponenten wrap nennen wir sie A & B. Ich will P in der Lage sein, sie nach dem Erstellen von ihnen C zu übergeben, um das Design abstrakt zu halten, während um die Komponenten nur als Variable in C zu verwenden.

Answer 1

Ja, das ist möglich. Tatsächlich funktioniert die Zusammensetzung für modulare Komponenten in Angular2.

Also zum Beispiel, wenn Sie eine modale Komponente haben und Sie diese überall in der App verwenden möchten, aber diese Komponente ist nur ein Wrapper und es wird benötigt, um dynamische Komponenten hinzuzufügen.

Hier ist es ein Beispiel mit dem ComponentFactoryResolver:

@Component({ 
    selector: 'my-dynamic-component', 
    template: 'this is a dynamic injected component !' 
}) 
export class MyDynamicComponent {} 


@Component({ 
    selector: 'wrapper', 
    template: ` 
    <div> 
    <p>Wrapper Component</p> 
    <template #dynamicComponent></template> 
    </div> 
    ` 
}) 
export class WrapperComponent { 
    @Input() contentComponent: any; 
    @ViewChild('dynamicComponent', { read: ViewContainerRef }) 

    dynamicComponent: any; 

    constructor(private componentResolver: ComponentFactoryResolver) {} 

    ngAfterViewInit():void { 
    const factory = this.componentResolver.resolveComponentFactory(this.contentComponent); 

    this.dynamicComponent.createComponent(factory); 
    } 
} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <wrapper [contentComponent]="MyDynamicComponent"></wrapper>` 
}) 
export class AppComponent { 
    MyDynamicComponent: any = MyDynamicComponent; 
} 

von deprecated ComponentResolver answer Inspiriert
Ein anderer Weg, dies zu tun answer HERE

Example PLUNKER