コンポーネントで使用されているディレクティブへの参照を取得する

質問

以下のようなテンプレートを持つコンポーネントがあります。

<div [my-custom-directive]>Some content here</div>

にアクセスする必要があります。 MyCustomDirective クラスのインスタンスにアクセスする必要があります。子コンポーネントへのアクセスを取得したい場合、私は ViewChild クエリを使用します。

子ディレクティブにアクセスするための同等の機能はありますか？

どのように解決するのですか?

この場合 exportAs のプロパティに @Directive アノテーションのプロパティです。これは、親ビューで使用されるディレクティブをエクスポートします。親ビューから、それをビュー変数にバインドし、親クラスからそれにアクセスするために @ViewChild() .

例 プランカー :

@Directive({
  selector:'[my-custom-directive]',
  exportAs:'customdirective'   //the name of the variable to access the directive
})
class MyCustomDirective{
  logSomething(text){
    console.log('from custom directive:', text);
  }
}

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div #cdire=customdirective my-custom-directive>Some content here</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') element;

  ngAfterViewInit(){
    this.element.logSomething('text from AppComponent');
  }
}

更新

コメントで言及されているように、上記の方法とは別の選択肢があります。

を使う代わりに exportAs を使う代わりに、直接 @ViewChild(MyCustomDirective) または @ViewChildren(MyCustomDirective)

以下は、3つのアプローチの違いを示すコードです。

@Component({
    selector: 'my-app',
    directives:[MyCustomDirective],
    template: `
    <h1>My First Angular 2 App</h1>

    <div my-custom-directive>First</div>
    <div #cdire=customdirective my-custom-directive>Second</div>
    <div my-custom-directive>Third</div>
    `
})
export class AppComponent{
  @ViewChild('cdire') secondMyCustomDirective; // Second
  @ViewChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ViewChild(MyCustomDirective) firstMyCustomDirective; // First

}

更新

より明確化された別のプランカー