DIおよびtransclusion

Question

私は、componentCの内容が、componentBのように現れ、そのコンストラクタでDI307を得た3つの成分を持っています。

@Component({ 
    selector: 'componentA', 
    template: ` 
    <componentB> 
     <componentC></componentB> 
     <ng-content></ng-content> 
    </componentB>` 
.... 
export class ComponentC { 
    constructor(private cmpB: ComponentB) 

今私は別のコンポーネントからcomponentAを使用して、私はcomponentAのテンプレートに入れ<ng-content>を経由して、それに追加componentC Sを供給するためにトランスクルーを使用したい：

<componentA> 
    <componentC></componentC> 
</componentA> 

これはNo provider for ComponentBをトリガします。 <ng-content>を使用して、コンテンツを<componentB>の内部に表示するようにしました。DIは挿入ポイントの親であるComponentBオブジェクトを見つけることができるはずです。

このシナリオは可能ですか？ Angularは私の余分なComponentCをターゲットの場所に直接作成するか、最初にマークアップがそれを移動する場所ですか？これを行うようにプロバイダを設定する方法はありますか？

Answer 1

トランスクルーがcomponentCcomponentBの子を作成しませんが、それはDOMが変更された中でそれが示されているだけのところ、componentAの子をご利用いただけます。

注入作業を簡単に行う方法はありません。

あなたが作ることができるcomponentAはComponentCはそれがcomponentBへのアクセスを取得します。このサービスを注入するとcomponentAがcomponentB

@Component({ 
    ... 
    providers: [ComponentBProviderService], 
class ComponentA { 
    @ViewChild(ComponentB) componentB:ComponentB; 
    constructor(private bProvider: ComponentBProviderService){} 
    ngAfterViewInit() { 
    this.bProvider.component = this.componentB; 
    } 
} 

への参照を代入したサービスを提供しています。 サービスでObservableを使用して、参照が利用可能になったときにcomponentCに積極的に通知することは理にかなっています。

class ComponentC { 
    componentB:ComponentB; 
    constructor(bProvider: ComponentBProviderService){ 
    bProvider.componentAvailable.subscribe(val => this.componentB = val); 
    } 
}