從父方法調用子組件方法 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 生命周期掛鈎中