Angular中作为Input传入的父方法访问订阅变量返回undefined如何解决

问题核心原因 #

普通函数的this为执行时绑定，你将父组件方法作为@Input()传入子组件后，子组件调用该方法时执行上下文已经变为子组件实例，自然无法访问父组件的business变量。

可行解决方案 #

方案1：父组件方法改为箭头函数（最简单的修改方案）

箭头函数的this为词法绑定，固定指向定义时所在的父组件实例，不会随调用上下文变化。修改parent-example.component.ts中的onClick定义即可：

export class ParentExampleComponent implements OnInit {
  business;

  constructor(businessEntityService: BusinessEntityService) {
    businessEntityService.entities$.subscribe(
      data => (this.business = data),
    );
  }

  // 改为箭头函数定义
  onClick = () => {
    console.log(this.business);
  }

  ngOnInit(): void {}
}

方案2：模板传参时绑定父组件上下文

在父组件模板传入方法时，用bind手动绑定父组件的this上下文：

<example [method]="onClick.bind(this)"></example>

注意：该写法会在每次变更检测时生成新的函数实例，小场景无影响，高频变更的复杂组件建议优先用方案1。

方案3：使用@Output()事件传递（Angular官方推荐做法）

Angular设计上更推荐子组件通过抛出事件的方式触发父组件逻辑，完全规避this指向问题，也更符合单向数据流规范：

1. 修改子组件example.component.ts，新增@Output()事件：

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'example',
  templateUrl: './example.component.html',
})
export class ExampleComponent implements OnInit {
  @Output() onClick = new EventEmitter<void>();

  constructor() {}

  ngOnInit(): void {}
}

2. 修改子组件模板example.component.html，点击时抛出事件：

<div>
  <button (click)="onClick.emit()">click here</button>
</div>

3. 修改父组件模板parent-example.component.html，监听子组件事件：

<example (onClick)="onClick()"></example>

父组件的onClick不需要做任何修改，执行时this天然指向父组件实例。

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