从父方法角度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>

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

FYI:如果我在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

这里有两个可能的问题。

第一个是:子组件位于一些结构指令下，比如*ngIf。在这里，将子标记为{static: false}应该可以解决问题。

另一种情况是，您使用"displayMessage“方法太早，而您的父级模板尚未呈现。如果是这样，将this.displayMessage(...)调用放在ngAfterViewInit角度生命周期钩子中。