Angular2/TypeScript中如何正确向自定义指令传递函数？

嘿，我来帮你搞定这两个问题，它们本质上都是函数绑定方式不对导致的，咱们一步步拆解解决：

问题根源分析 #

先搞清楚为啥会出现这两个问题：

1. 无限循环调用onCompanyChange：你在模板里写[onRefresh]="onCompanyChange(id)"时，这是立即执行了函数，而非传递函数本身。Angular的变更检测会持续检查模板表达式，每次检查都会执行这个函数，直接导致无限循环。而且这个函数没有返回值（是void类型），所以传给指令refresh输入的其实是undefined。
2. refresh is not a function报错：因为上面的原因，refresh拿到的是undefined而非函数，当指令试图调用它时自然会抛出类型错误。

解决方案 #

步骤1：修正模板的函数绑定，传递函数引用 #

你需要把函数本身传给指令，同时处理参数传递的问题，这里有两种常用方式：

方式一：用箭头函数包裹（简单直接）

修改tsp-header.html的绑定逻辑：

<!-- company changer -->
<li>
  <tsp-field-widget 
    type="company-select" 
    [onRefresh]="(selectedId) => onCompanyChange(selectedId)" 
    [showAvatar]="true" 
    [fieldData]="core.app.current_user.preferences" 
    fieldKey="current_company_id" 
    [hideLabel]="true" 
    [optionData]="core.app.session.base_companies">
  </tsp-field-widget>
</li>

箭头函数会保留组件的this上下文，同时等待指令传入选中的id后再执行onCompanyChange。

方式二：在组件中绑定this上下文（适合复杂场景）

如果担心箭头函数每次变更检测都创建新函数的性能问题，可以在组件初始化时绑定this：
修改tsp-header.component.ts：

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

export class TspHeaderComponent implements OnInit {
  // ... 其他原有代码

  ngOnInit() {
    // 绑定this上下文，确保函数执行时指向组件实例
    this.onCompanyChange = this.onCompanyChange.bind(this);
  }

  public onCompanyChange(id: string): void {
    // ... 原有逻辑保持不变
  }
}

然后模板里直接传递函数引用：

<!-- company changer -->
<li>
  <tsp-field-widget 
    type="company-select" 
    [onRefresh]="onCompanyChange" 
    [showAvatar]="true" 
    [fieldData]="core.app.current_user.preferences" 
    fieldKey="current_company_id" 
    [hideLabel]="true" 
    [optionData]="core.app.session.base_companies">
  </tsp-field-widget>
</li>

步骤2：确保指令在值变化时正确调用refresh #

接下来要确认tsp-field-widget组件在选择框值变化时，能把选中的id传给refresh函数。比如在它的模板中添加change事件处理：
假设tsp-field-widget.html的选择框部分是这样的：

<select (change)="handleSelectChange($event)">
  <!-- 选项渲染逻辑 -->
</select>

然后在tsp-field-widget.component.ts中添加处理函数：

export class TspFieldWidgetComponent implements OnInit {
  // ... 原有输入属性

  handleSelectChange(event: Event) {
    const selectedId = (event.target as HTMLSelectElement).value;
    // 先判断refresh是否为有效函数，避免额外报错
    if (this.refresh && typeof this.refresh === 'function') {
      this.refresh(selectedId);
    }
  }
}

这样用户切换选择框时，就会把选中的id传递给onCompanyChange，且只会在值变化时触发一次，彻底解决无限循环的问题。

内容的提问来源于stack exchange，提问作者Let A Pro Do IT