在指令中调用函数

Question

我试图通过像这样通过 viewchild 获取指令来从组件调用我的指令中的公共函数

 @ViewChild('myDirective') myDirective;
 ....
 myDirective.nativeElement.myFunction();

但我收到 myFunction 不存在的错误。 有没有办法调用指令内部的函数？

Answer 1

DEMO - How to call Directive's function from Component - 检查浏览器的 控制台

---

1)我希望您导入 myDirective 指令。

import {myDirective} from './Directive';

2)

@ViewChild(myDirective) vc:myDirective;   ///<<<@@@removed '' from ('myDirective')

3)

ngAfterViewInit(){   
    this.vc.myFunction();                 ///<<@@@ no need to use nativeElement
}

4)或者某个按钮的点击事件

click(){
   this.vc.myFunction();
}

Answer 2

使用@ContentChild()。指令没有视图。

在ngAfterContentChecked() 中调用this.myDirective.nativeElement.myFunction() 以确保this.myDirective... 已经初始化。