@ContentChildの角2参照動的インスタンス

Question

私は角度2.0.1を使用しています。

私は<ng-content>経由で他のコンポーネントを取り込むことができるコンポーネントを持っています - これは素晴らしい作品です。

私が問題になったのは、注入されたコンポーネントを参照したいときです。私は<ng-content>だけ今まで私が言うことができる一つの構成要素になることを知っていた場合

：（私はなるだろう唯一の仮定は任意の注入されたコンポーネントは、特定のインターフェイスを実装していることである） @ContentChild(MyComponent) dynamicTarget: IMyComponent;それは任意の構成要素とすることが可能性があるため、それがトリッキーになります。

また、<ng-content #dynamicTarget'>を試した後、@ContentChild('dynamicTarget') dynamicTarget: IMyComponent;と言っていますが、これは未定義です。

誰かが私がそれに関数を呼び出そうとすることができるように、このことがコンポーネントのインスタンスであることをAngular 2に伝える方法を知っていますか？

ユースケースをさらに明確にするために、コンテンツとして任意のコンポーネントを取り込むことができる複数ステップのウィザードがあり、そのコンテンツに対してvalidate関数を呼び出す必要があります（ここでも、 ）

Answer 1

1つのアプローチは、任意の動的コンポーネントに同じものを与えることができます。 私は#thoseThingsを与えました。 （これは@Missingmanualとほぼ同じだと思います）

PLUNKER（マッチはコンソールを参照してください。）

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div [style.border]="'4px solid red'"> 
    I'm (g)Root. 

    <child-cmp> 
     <another-cmp #thoseThings></another-cmp> 
    </child-cmp> 
    </div> 
    `, 
}) 
export class App { 
} 


@Component({ 
    selector: 'child-cmp', 
    template: ` 
    <div [style.border]="'4px solid black'"> 
     I'm Child. 
     <ng-content></ng-content> 
    </div> 
    `, 
}) 
export class ChildCmp { 
    @ContentChildren('thoseThings') thoseThings; 

    ngAfterContentInit() { 
    console.log(this.thoseThings); 

    this.validateAll(); 

    if(this.thoseThings){ 
    this.thoseThings.changes.subscribe(() => { 
     console.log('new', this.thoseThings); 
    }) 
    } 
    } 

    validateAll() { 
    this.thoseThings.forEach((dynCmp: any) => { 
     if(dynCmp.validate) 
     dynCmp.validate(); // if your component has a validate function it will be called 
    }); 
    } 
} 


@Component({ 
    selector: 'another-cmp', 
    template: ` 
    <div [style.border]="'4px solid green'"> 
     I'm a Stranger, catch me if you can. 
    </div> 
    `, 
}) 
export class AnOtherCmp { 
} 

Answer 2

• スーパー古いバージョンhttps://github.com/angular/angular/issues/8580で作業するために使用さが、私はそれがNgModule

で動作させることができなかったことにより、クエリ3210

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, Parent, Transcluded1, Transcluded2 ], 
    providers: [ 
    {provide: TranscludedBase, useExisting: Transcluded1, multi:true} 
    {provide: TranscludedBase, useExisting: Transcluded2, multi:true} 
    ], 
    bootstrap: [ App ] 
}) 

Plunker example

• あなたは、ウィザードの手順の代わりに、タブが動的コンポーネントの作成Angular 2 dynamic tabs with user-click chosen componentsを使用することができます。

• もう一つの方法は、にあるそれらを投影することに加えて、入力に明示的要素を渡す：

Plunker example

Answer 3

を、あなたのすべてを知っている場合コンポーネントはvalidateを持ち、同じインタフェースを実装します。 IValidate、その後、あなたはそれが要求されたインタフェースに適合するよう

@ContentChild('IValidate') dynamicTarget: IValidate; 
// ... 
this.dynamicTarget.validate(); 

角度は限り正確なクラスを気にしませんと言うことができます。