angular - @viewchild for 指令始终返回元素引用而不是指令引用 - angular5

Question

我目前正在开发一个项目，我需要根据组件传递一些@input值。因此，该指令将相应地发挥作用。但问题是我无法获得该指令的引用。相反，我只得到了 elementRef 作为返回。请参阅下面的 stackblitz 示例以获取更多引用。

https://stackblitz.com/edit/angular-feptw3

Answer 1

有多种方法可以修复它:

1) 使用读取选项:

@ViewChild("myCustomDir", { read: MyCustomDirective}) myCustomDir: MyCustomDirective;

<强> Example

另请参阅:

• How to get reference of the component associated with ElementRef in Angular 2

2) 使用exportAs

指令.ts

@Directive({
  selector: "[myCustom]",
  exportAs: 'myCustom'
  ^^^^^^^^^^^^^^^^^^^^
})
export class MyCustomDirective {
  ...
}

html

<h1 myCustom #myCustomDir="myCustom">
                           ^^^^^^^^

<强> Example

另请参阅:

• What is #auto attribute here and why it is required