Angular中Ionic返回按钮onclick调用组件函数报ReferenceError

问题原因 #

HTML原生onclick属性的代码运行在全局window上下文，而非Angular组件的类实例上下文，所以直接调用onBack()或this.onBack()时，无法找到组件类中定义的方法，导致ReferenceError。

解决方案 #

方法一：使用Angular事件绑定（推荐）

通过Angular的(click)事件绑定，自动关联组件实例上下文，既能阻止默认行为，又能正常调用组件方法。

HTML代码：

<ion-back-button (click)="handleBackClick($event)" slot="start"></ion-back-button>

组件类代码：

export class Component implements OnInit {
  handleBackClick(event: Event) {
    // 阻止返回按钮的默认行为
    event.stopImmediatePropagation();
    // 调用自定义方法
    this.onBack();
  }

  onBack() {
    console.log("here");
  }
}

方法二：全局挂载组件实例（不推荐，易造成全局污染）

如果必须使用原生onclick，可将组件实例挂载到window对象，让全局上下文能访问到组件方法。

组件类代码：

export class Component implements OnInit {
  ngOnInit() {
    // 将组件实例挂载到全局window
    (window as any).componentInstance = this;
  }

  onBack() {
    console.log("here");
  }
}

HTML代码：

<ion-back-button onclick="event.stopImmediatePropagation(); window.componentInstance.onBack()" slot="start"></ion-back-button>

内容的提问来源于stack exchange，提问作者Neeraj