Angular子组件调用父组件传入函数时无法访问父组件公共属性

问题原因 #

当你把父组件的setEntrada函数作为Input传给子组件后，调用该函数时，this的上下文不再指向父组件实例，而是变成子组件实例或undefined（严格模式下），因此console.log(this.entrada)会输出undefined。你尝试EventEmitter时出错，大概率是用法不符合Angular组件通信规范。

解决方法 #

方法1：绑定函数的this上下文 #

方式A：模板中用bind绑定父组件this

修改父组件模板，传递函数时显式绑定父组件的this：

<app-entrada-hall [setEntrada]="setEntrada.bind(this)" ></app-entrada-hall>

方式B：将父组件函数定义为箭头函数

箭头函数会继承外层上下文的this，直接修改父组件的setEntrada定义：

// 父组件类中修改setEntrada
setEntrada = (field: any, observation: any, fieldText: any):void => {
  console.log(this.entrada);
}

此时模板无需额外处理，直接传递函数即可：

<app-entrada-hall [setEntrada]="setEntrada" ></app-entrada-hall>

方法2：正确使用EventEmitter（推荐） #

EventEmitter是Angular组件间通信的标准方式，可彻底避免this上下文问题，具体步骤如下：

子组件代码修改

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

@Component({
  selector: 'app-entrada-hall',
  templateUrl: './entrada-hall.component.html',
  styleUrls: [
    '../../../pages/bookings/new-booking-modal/new-booking-modal.page.scss',
    './entrada-hall.component.scss',
  ],
})
export class EntradaHallComponent implements OnInit {
  // 定义Output事件，携带需要传递的数据结构
  @Output() setEntradaEvent = new EventEmitter<{field: any, observation: any, fieldText: any}>();
  constructor() {}
  public limpiezaEntrada: boolean;
  ngOnInit() {}

  setEntradaMain(field: any, observasion:any, fieldText: any,) {
    // 发射事件并传递数据
    this.setEntradaEvent.emit({field, observation: observasion, fieldText});
  }
}

父组件模板修改

监听子组件的事件，调用父组件自身的setEntrada函数：

<app-entrada-hall (setEntradaEvent)="setEntrada($event.field, $event.observation, $event.fieldText)" ></app-entrada-hall>

父组件函数保持原样

此时父组件函数由自身调用，this上下文正确，可正常访问this.entrada：

setEntrada(field: any, observation: any, fieldText: any):void {
  console.log(this.entrada);
}

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