Angular中子组件回调父组件函数时无法读取父组件属性的问题

报错ERROR TypeError: Cannot read properties of undefined (reading 'textGuid')的核心原因是函数的this上下文丢失：父组件中直接将this.save、this.delete赋值给summaryTopbarConfig的function字段时，函数与原组件实例的绑定关系被切断。当子组件调用fnct()时，this不再指向父组件实例，而是指向全局对象（严格模式下为undefined），自然无法访问textGuid属性。

方法1：用箭头函数绑定this（快速修复） #

在父组件的配置中，用箭头函数包裹原方法，箭头函数会自动继承父组件的this上下文：

// translation-editor.component.ts
summaryTopbarConfig = [
  {
    "label": "Save Text",
    "function": () => this.save(), // 箭头函数绑定父组件this
  },
  { 
    "label": "Delete Text", 
    "function": () => this.delete(), 
  }
];

子组件的代码无需修改，直接调用即可。

方法2：在构造函数中手动绑定this #

在父组件的构造函数中，将save、delete方法的this强制绑定到组件实例：

// translation-editor.component.ts
constructor(
  private translationService:TranslationService,
  public actRoute: ActivatedRoute,
) {
  // 绑定this到组件实例
  this.save = this.save.bind(this);
  this.delete = this.delete.bind(this);
}

此时summaryTopbarConfig中的function: this.save可以保持原样，函数执行时this始终指向父组件实例。

方法3：使用Angular输出事件（推荐，符合组件通信规范） #

直接传递函数会增加组件耦合度，更符合Angular设计思想的方式是通过@Output事件触发父组件方法：

子组件修改 #

// topbar.component.ts
import { EventEmitter, Output } from '@angular/core';

export class TopbarComponent implements OnInit {
  @Input() config: any[] | undefined;
  @Output() buttonAction = new EventEmitter<string>(); // 定义输出事件

  constructor(private location: Location) { }

  ngOnInit(): void {
  }

  initiateFunction(actionKey: string){
    this.buttonAction.emit(actionKey); // 触发事件，传递操作标识
  }
}

<!-- topbar.component.html -->
<ul class="sidebar-items">
<ng-container *ngFor="let btn of config">
  <li>
    <button (click)="initiateFunction(btn.actionKey)">
      <span class="label">{{btn.label}}</span>
    </button>
  </li>
</ng-container>
</ul>

父组件修改 #

// translation-editor.component.ts
summaryTopbarConfig = [
  {
    "label": "Save Text",
    "actionKey": "save" // 用标识代替直接传递函数
  },
  { 
    "label": "Delete Text", 
    "actionKey": "delete"
  }
];

// 新增事件处理方法
handleTopbarAction(actionKey: string) {
  switch(actionKey) {
    case 'save':
      this.save();
      break;
    case 'delete':
      this.delete();
      break;
  }
}

<!-- translation-editor.component.html -->
<topbar [config]="currentTopBarConfig" (buttonAction)="handleTopbarAction($event)"></topbar>

这种方式彻底避免了this绑定问题，同时降低了组件间的耦合，更易于维护和扩展。

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