Angular：如何处理Function类型Input的额外参数传递与this指向问题

第三方库定义的组件输入属性如下：

fetchChildren: (node: object) => Observable<object[]>;

我在主组件中这样调用并实现该方法：

<my-component [fetchChildren]="fetchChildren"></my-component>

public fetchChildren(node: any): Observable<any[]> {
  return of(node.items);
}

现在需要给fetchChildren传递额外参数，但无法修改该方法的签名。尝试访问主组件的属性时，发现函数内部的this指向第三方组件实例，导致属性无法访问：

myAdditionalProp: number = 1;

public fetchChildren(node: any): Observable<any[]> {
  console.log(this.myAdditionalProp); // undefined
  return of(node.items);
}

1. 箭头函数包裹+闭包捕获参数 #

直接在模板中用箭头函数封装，既保留主组件的this指向，还能灵活传入额外参数：

<my-component [fetchChildren]="(node) => handleFetchChildren(node, myAdditionalProp)"></my-component>

myAdditionalProp: number = 1;

private handleFetchChildren(node: any, extraParam: number): Observable<any[]> {
  console.log(extraParam); // 输出1
  return of(node.items);
}

如果myAdditionalProp是响应式数据，为避免箭头函数在每次变更检测时重新创建影响性能，可结合useCallback优化：

import { useCallback } from '@angular/core';

// ...

handleFetchChildren = useCallback((node: any) => {
  console.log(this.myAdditionalProp); // 正常访问主组件属性
  return of(node.items);
}, [myAdditionalProp]);

模板直接使用优化后的方法：

<my-component [fetchChildren]="handleFetchChildren"></my-component>

2. 用bind绑定主组件上下文 #

在组件初始化阶段，通过bind将方法的this强制绑定到主组件实例：

ngOnInit(): void {
  this.fetchChildren = this.fetchChildren.bind(this);
}

myAdditionalProp: number = 1;

public fetchChildren(node: any): Observable<any[]> {
  console.log(this.myAdditionalProp); // 输出1
  return of(node.items);
}

模板保持原写法即可：

<my-component [fetchChildren]="fetchChildren"></my-component>

3. 创建闭包函数捕获上下文 #

提前在主组件中生成一个闭包函数，自动捕获主组件的上下文和需要的参数，再传递给第三方组件：

myAdditionalProp: number = 1;
boundFetchChildren!: (node: any) => Observable<any[]>;

ngOnInit(): void {
  this.boundFetchChildren = (node: any) => {
    console.log(this.myAdditionalProp); // 输出1
    return of(node.items);
  };
}

模板中使用这个闭包函数：

<my-component [fetchChildren]="boundFetchChildren"></my-component>

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