Angular中向子组件传递点击函数出现undefined问题

你遇到的this.formBuilder为undefined的问题，本质是函数的上下文（this指向）丢失了。当你把signIn方法作为@Input传递给子组件时，方法的this不再指向HomeComponent实例，导致无法访问类里的formBuilder和form属性。

下面是几种可行的解决方案：

方案1：用箭头函数定义方法 #

箭头函数会自动绑定当前类的上下文，修改HomeComponent里的signIn方法定义：

signIn = () => {
  console.log(this.formBuilder); // 现在能正常访问
  const value = this.form.value;
  console.log(value);
}

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

在HomeComponent的构造函数里，把方法的this绑定到当前组件实例：

constructor(private formBuilder: FormBuilder) {
  // 绑定this到组件实例
  this.signIn = this.signIn.bind(this);
}

signIn() {
  console.log(this.formBuilder);
  const value = this.form.value;
  console.log(value);
}

方案3：模板中用箭头函数包裹传递 #

在父组件模板里，用箭头函数包裹要传递的方法，强制保留上下文：

<app-button [click]="() => signIn()">Login</app-button>

更推荐的方案：改用Angular Output事件绑定 #

Angular组件间传递事件的规范方式是使用@Output而非传递函数输入，这更符合组件通信的设计模式：

1. 修改子组件ButtonComponent，添加@Output：

import { CommonModule } from '@angular/common'
import { Component, Input, Output, EventEmitter } from '@angular/core'

@Component({
  selector: 'app-button',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './button.component.html',
  styleUrl: './button.component.scss'
})
export class ButtonComponent {
  @Input() type?: string;
  @Output() click = new EventEmitter<void>();
}

2. 修改子组件模板，触发click事件：

<button (click)="click.emit()" [type]="type || 'submit'" class="button">
  <ng-content></ng-content>
</button>

3. 父组件模板中用事件绑定方式使用：

<app-button (click)="signIn()">Login</app-button>

这种方式从根源上避免了上下文丢失问题，也是Angular官方推荐的组件事件传递方案。

内容的提问来源于stack exchange，提问作者vy.pham