Angular 15严格模式下事件绑定类型不匹配问题求解

问题根源是子组件的onAction输出事件未显式指定类型，严格模式下Angular会将其推断为Object，与父组件定义的参数类型不兼容。以下是具体解决步骤：

1. 定义类型接口（推荐方式） #

在子组件文件或共享类型文件中定义对应的数据接口，便于复用和维护：

// 可放在子组件文件（如child.component.ts）或单独的types.ts中
export interface ActionEvent {
  first_data_item: number;
  second_data_item: number;
  third_data_item: any;
  fourth_data_item: string;
}

2. 给子组件的输出事件指定类型 #

在子组件中导入接口，为@Output()的EventEmitter指定泛型类型：

import { Component, Output, EventEmitter } from '@angular/core';
import { ActionEvent } from './path-to-your-interface'; // 替换为实际文件路径

@Component({
  selector: 'app-component',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  // 显式声明输出事件的类型为ActionEvent
  @Output() onAction = new EventEmitter<ActionEvent>();

  // 子组件触发事件时，确保传递的数据符合类型约束
  triggerAction() {
    const eventData: ActionEvent = {
      first_data_item: 1,
      second_data_item: 2,
      third_data_item: '任意数据',
      fourth_data_item: '测试文本'
    };
    this.onAction.emit(eventData);
  }
}

3. 父组件中使用接口标注参数 #

父组件导入接口，用它约束action函数的参数类型：

import { Component } from '@angular/core';
import { ActionEvent } from './path-to-your-interface'; // 替换为实际文件路径

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  action(event: ActionEvent) {
    // 处理事件逻辑
    console.log(event.first_data_item);
  }
}

简化方式（无需单独定义接口） #

如果不想创建独立接口，可直接在EventEmitter中指定字面量类型：

// 子组件中
@Output() onAction = new EventEmitter<{
  first_data_item: number;
  second_data_item: number;
  third_data_item: any;
  fourth_data_item: string;
}>();

父组件的action函数参数保持原定义即可，此时类型会自动匹配。

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