开启Angular模板严格模式后，双向绑定传数字至联合类型输入属性报错

针对你遇到的问题，这里有几个实用的解决思路，不用修改父组件变量类型或关闭严格类型检查：

方案1：给共享组件添加泛型支持（最推荐） #

把共享组件改成泛型组件，让父组件可以指定selectedId的具体类型，这样双向绑定就能自动匹配类型：

// 共享组件代码
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'my-shared-component',
  template: `<!-- 组件模板内容 -->`
})
export class MySharedComponent<T extends string | number> {
  @Input() selectedId!: T;
  @Output() selectedIdChange = new EventEmitter<T>();

  // 组件内部触发变更的示例逻辑
  updateSelection(newValue: T) {
    this.selectedId = newValue;
    this.selectedIdChange.emit(newValue);
  }
}

父组件使用时，明确指定泛型类型为number：

<my-shared-component<number> [(selectedId)]="myNumberId"></my-shared-component>

这种方式既保留了共享组件支持string|number的灵活性，又让父组件的强类型绑定完全合规，是长期维护的最优解。

方案2：拆分双向绑定为单向绑定+手动事件处理 #

如果不想改动共享组件结构，可以把双向绑定拆成单向输入和手动处理输出事件，用类型断言明确告知TS当前场景下的返回值类型（你已经确定不会出现string）：

<my-shared-component
  [selectedId]="myNumberId"
  (selectedIdChange)="myNumberId = $event as number"
></my-shared-component>

这个方法简单直接，不需要修改组件代码，适合快速解决临时场景的问题。

方案3：添加类型专属的输入输出别名 #

给共享组件新增一套针对number类型的输入输出属性，内部映射到原有逻辑，不影响原有API的兼容性：

// 共享组件代码
import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'my-shared-component',
  template: `<!-- 组件模板内容 -->`
})
export class MySharedComponent implements OnInit {
  @Input() selectedId: string | number;
  @Output() selectedIdChange = new EventEmitter<string | number>();

  // 新增number专属输入
  @Input() set selectedNumberId(value: number) {
    this.selectedId = value;
  }
  get selectedNumberId(): number {
    return this.selectedId as number;
  }

  // 新增number专属输出
  @Output() selectedNumberIdChange = new EventEmitter<number>();

  ngOnInit() {
    // 监听原有输出，转发到专属输出（只传递number类型值）
    this.selectedIdChange.subscribe(value => {
      if (typeof value === 'number') {
        this.selectedNumberIdChange.emit(value);
      }
    });
  }
}

父组件使用新的双向绑定属性：

<my-shared-component [(selectedNumberId)]="myNumberId"></my-shared-component>

这个方案适合需要兼容老代码、不想改动原有组件核心逻辑的场景，但会增加组件的维护成本。

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