在指令中调用函数

Question

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

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

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

Answer 1

DEMO - 如何从Component调用Directive的功能 - 检查浏览器的控制台

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...已初始化.