angular - 获取对组件中使用的指令的引用

Question

我有一个组件，其模板看起来像这样:

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

我需要访问此处使用的 MyCustomDirective 类实例。当我想访问子组件时，我使用 ViewChild 查询。

是否有等效的功能来访问子指令？

Answer 1

您可以使用 exportAs @Directive 的属性(property)注解。它导出要在父 View 中使用的指令。在父 View 中，您可以将它绑定(bind)到 View 变量并使用 @ViewChild() 从父类访问它.

以 plunker 为例:

@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)

下面是一些代码来演示这三种方法之间的区别:

@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

}

更新

Another plunker with more clarification