在指令中调用函数

Question

我试图通过像这样的viewchild获取指令来调用一个公共函数，该函数位于我的组件指令中

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

但是我得到myFunction不存在的错误。 有没有办法调用一个iniside指令的函数？

Answer 1

<强> DEMO - How to call Directive's function from Component - check browser's console

<小时/> 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()。指令没有视图。

在this.myDirective.nativeElement.myFunction()中致电ngAfterContentChecked()，确保this.myDirective...已初始化。