Angular新手求助：角色认证中遇TS2345类型不匹配错误

问题根源 #

你定义的tabChange方法参数要求是number类型，但子组件<app-tabs>触发onTabChange事件时传递的是原生Event对象，导致类型不兼容。

修复方案 #

1. 修正子组件的事件输出类型 #

打开app-tabs.component.ts，确保onTabChange输出的是数字类型的tab索引，而非Event：

// app-tabs.component.ts
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-tabs',
  templateUrl: './app-tabs.component.html'
})
export class AppTabsComponent {
  @Input() tabsArray: any[];
  @Output() onTabChange = new EventEmitter<number>(); // 明确指定输出number类型

  // 触发切换事件时传递tab索引
  onTabClicked(tabIndex: number) {
    this.onTabChange.emit(tabIndex);
  }
}

2. 对齐父组件方法的参数类型 #

确保父组件中tabChange方法的参数为number：

// 父组件.ts文件
tabChange(selectedTabIndex: number) {
  // 编写tab切换后的逻辑，比如根据索引加载对应内容
  console.log('当前选中tab索引:', selectedTabIndex);
}

3. 特殊场景处理（若需接收Event） #

如果业务需要获取点击事件的原生信息，直接修改父组件方法的参数类型为Event：

// 父组件.ts文件（需接收Event时）
tabChange(event: Event) {
  // 从事件对象中提取tab索引（示例：假设tab元素有data-tab-index属性）
  const tabIndex = Number((event.target as HTMLElement).dataset['tabIndex']);
  console.log('当前选中tab索引:', tabIndex);
}

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