Angular子组件调用父组件方法报错：tabMethod不是函数

问题场景 #

在Angular项目中，尝试通过父组件传递包含方法的数组给子组件，子组件循环渲染并调用该方法时，出现tabMethod is not a function错误。相关代码如下：

父组件.ts #

this.pillTabs = [
    { tabName: 'Subscribers', tabMethod: this.showSubscribers.bind(this) },
    { tabName: 'Exemplars', tabMethod: this.showExemplars.bind(this) }
];

父组件.html #

<pill-tabs [pillTabs]="pillTabs"></pill-tabs>

子组件.ts #

@Input() pillTabs: any;

子组件.html #

<div *ngFor="let pillTab of pillTabs; let i = index">
    <input type="radio" id="{{'radio-' + i}}" name="tabs" [checked]="pillTab.checked"
        (click)="pillTab.tabMethod()" />
    <label class="tab" for="{{'radio-' + i}}">{{pillTab.tabName}}</label>
</div>

解决方案 #

1. 改用箭头函数绑定上下文 #

箭头函数会自动捕获当前上下文的this，比bind()更稳定，避免因数组重新赋值或序列化导致的方法丢失：

this.pillTabs = [
    { tabName: 'Subscribers', tabMethod: () => this.showSubscribers() },
    { tabName: 'Exemplars', tabMethod: () => this.showExemplars() }
];

2. 确保子组件在数据就绪后渲染 #

如果父组件的pillTabs是异步初始化（比如依赖接口请求），子组件可能在数据未准备好时就开始渲染，此时pillTabs为空或元素不完整。可以在父组件模板中用*ngIf延迟子组件加载：

<pill-tabs *ngIf="pillTabs && pillTabs.length" [pillTabs]="pillTabs"></pill-tabs>

3. 添加类型定义避免类型歧义 #

使用any类型会跳过Angular的类型检查，可能隐藏潜在问题。先定义统一的接口：

// 在共享文件或组件文件中定义
export interface PillTab {
    tabName: string;
    tabMethod: () => void;
    checked?: boolean;
}

然后在父组件和子组件中使用该类型：

// 父组件
pillTabs: PillTab[];

ngOnInit() {
    this.pillTabs = [
        { tabName: 'Subscribers', tabMethod: () => this.showSubscribers() },
        { tabName: 'Exemplars', tabMethod: () => this.showExemplars() }
    ];
}

// 子组件
@Input() pillTabs: PillTab[] = [];

4. 调用方法时添加安全检查 #

在子组件模板中使用可选链操作符?.，避免当tabMethod不存在时触发错误：

(click)="pillTab.tabMethod?.()"

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