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

Question

我有一个组件，其模板如下所示：

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

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

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

Answer 1

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

从父视图 class 访问它

示例 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

Answer 2

似乎自@Abdulrahman 的回答以来，指令不能再从@ViewChild 或@ViewChildren 访问，因为它们只传递DOM 元素本身的项目。

相反，您必须使用 @ContentChild/@ContentChildren 访问指令。

@Component({
    selector: 'my-app',
    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{
  @ContentChild('cdire') secondMyCustomDirective; // Second
  @ContentChildren(MyCustomDirective) allMyCustomDirectives; //['First','Second','Third']
  @ContentChild(MyCustomDirective) firstMyCustomDirective; // First
}

@Component 属性也不再有 directives 属性。

Answer 3

自 2019 年以来唯一剩余的解决方案

如其他答案的评论中所述，这些其他（以前有效的）方法不适用于更新版本的 Angular。

但是，很高兴，因为有一种更简单的方法来注入它：直接从构造函数中注入！

@Component({
   // ...
})
export class MyComponent implements OnInit {

  // Would be *undefined*
  // @ContentChild(MyDirective, { static: true })
  // private directive: MyDirective;

  constructor(private directive: MyDirective) { }

  ngOnInit(): void {
    assert.notEqual(this.directive, null); // it passes!
  }
}

此外，您可以添加多个注释来告诉依赖注入引擎在哪里寻找要注入的内容，例如使用 @Self or @Optional

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

Get reference to a directive used in a component

angular-template

angular2-directives

angular

自 2019 年以来唯一剩余的解决方案