Angular中传递组件方法引用后，注入的HttpClient为undefined问题

你推测的完全正确——当你把this.PrintTwo直接存入数组时，方法的上下文（this指向）被丢失了。此时这个方法不再绑定到AppComponent实例，调用时this不再指向组件，自然this.http就变成undefined。

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

方法1：绑定方法上下文到组件实例 #

在定义按钮数组时，用bind()把方法的this强制绑定到组件实例：

import { HttpClient } from '@angular/common/http';
import { Component, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(public http: HttpClient) {
    alert(http);
  }

  PrintTwo() {
    alert(this.http);
    alert('two');
  }
  
  btns: Array<any> = [
    {
      name: 'two',
      title: 'two',
      functionToCall: this.PrintTwo.bind(this), // 绑定this到组件实例
      class: 'btn-danger',
    },
  ];
}

方法2：用箭头函数包裹方法调用 #

箭头函数会自动继承当前作用域的this，可以用它来包裹方法调用，保留组件上下文：

btns: Array<any> = [
  {
    name: 'two',
    title: 'two',
    functionToCall: () => this.PrintTwo(), // 箭头函数保留组件的this
    class: 'btn-danger',
  },
];

方法3：模板中直接调用组件方法 #

如果不需要通过数组传递方法引用，也可以在模板里直接调用组件的PrintTwo方法，确保this指向正确：

<ng-container *ngFor="let btn of btns">
  <button
    class="btn me-4 {{ btn.class }}"
    [title]="btn.title"
    #btnElement
    (click)="PrintTwo()">
    {{ btn.name }}
  </button>
</ng-container>

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