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

Question

我需要从我的父组件调用子组件方法，并且需要发送对象。我下面的代码给了我这个错误：无法读取未定义的属性"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((这个函数，它可以工作。所以我不明白我做错了什么

Answer 1

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

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

更新：

当您将方法作为参数传递给函数时，它将丢失其上下文(this(。为了强制它的上下文使用我们的上下文，我们使用.bind()来使其上下文(this(明确。

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

Answer 2

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