Angular2でコンポーネントを渡す

Question

私は非常に抽象的でモジュラーになりたいと考えています。コンポーネントを入力としてコンポーネントに渡したいとします。

これは可能ですか？

私は入力を渡して内部的にコンポーネントを作成することができますが、別のコンポーネントを渡す必要がある場合は、それぞれのコンポーネントにコードをカスタマイズする必要があります。

たとえば、コンポーネントPを親として持ち、Cを子として持つとすれば、私はこのようなデザインのための特定の目的を持っています。この特定の実装を行うたびにCを再利用可能なコンポーネントとして使用したいと思います。内部に要素を持つデザイン。

私はC（2つの別々の要素）を2つの異なるコンポーネントの周りにラップさせたい場合は、A & Bと呼ぶことができます。私はPを作成した後にそれらを渡して、 C内の変数としてコンポーネントを使用するだけです。

Answer 1

はい、可能です。実際には、Angular2でモジュラーコンポーネントの合成がどのように機能しているかです。

たとえば、モーダルコンポーネントを使用していて、アプリケーション全体でそのコンポーネントを使用したい場合、そのコンポーネントは単なるラッパーであり、動的コンポーネントを追加する必要があります。

ここでは、ComponentFactoryResolverとの例です：deprecated ComponentResolver answer
からこれを行うための別の方法を着想を得

@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; 
} 

はrc5-6使用ComponentFactoryResolveリゾルバでanswer HERE

Example PLUNKER