从父方法调用子组件方法 Angular 8

Question

我需要从我的父组件调用子组件方法并且需要发送 object。 我有下面的代码给我这个错误：无法读取未定义的属性'RunMe'

我错过了什么？

子组件：

runMe = (item)  => {
    this.cdr.detectChanges();
    if (item.hidden) {
        this.showErrorMsgEvent.emit();
    } else {
        this.highLightEvent.emit(item);
    }
}

家长：

@ViewChild(childComponent, { static: true }) childComponent;

ListenIframeEvents(){
    window.addEventListener("message", this.displayMessage, false)
  }
  displayMessage (item) {
    this.childComponent.RunMe(item)
  }


<child-component #childComponent></child-component>

我用谷歌搜索了大多数答案，建议添加 # 选择器，但这对我不起作用。

仅供参考：如果我在 ngOnInit() 下运行 this.childComponent.RunMe() 这个 function 它可以工作。 所以我不明白我做错了什么

Answer 1

问题在于window.addEventListener("message", this.displayMessage, false)

将其更改为window.addEventListener("message", this.displayMessage.bind(this), false)

更新：

当您将方法作为参数传递给 function 时，它将丢失其上下文（ this ）。 为了强制使用我们的上下文，我们使用.bind()使其上下文 ( this ) 显式。

有关更多信息，请查看https://www.javascripttutorial.net/javascript-this/

Answer 2

这里有两个可能的问题。
第一个是：子组件位于某些结构指令下，例如 *ngIf。 这里将孩子标记为{static: false}应该可以解决问题。
另一种情况是您过早地使用“displayMessage”方法，此时您的父模板尚未呈现。 如果是这样，请将this.displayMessage(...)调用放在ngAfterViewInit angular 生命周期挂钩中