Angular10开启strictTemplates时枚举Input传值报TS2322类型错误

Angular 10开启strictTemplates严格模板检查后，模板里不带方括号的静态属性赋值，会被模板类型检查器直接推断为通用string类型，不会自动做枚举值的类型匹配。
TypeScript的字符串枚举属于独立标称类型，即便传入的"booking"字符串和ExportType.BOOKING的值完全一致，普通字符串类型也不会被判定为和枚举类型兼容，因此抛出类型不匹配错误。

优先使用类型安全的属性绑定方案传入枚举值，步骤如下：

• 在调用app-export-form的父组件类中，引入ExportType枚举并挂载到组件实例属性上，供模板访问：

import { ExportType } from '你的枚举文件相对路径';

export class 父组件类名 {
  readonly ExportType = ExportType;
  // 其余组件逻辑
}

• 修改模板中的组件调用代码，用方括号做属性绑定，显式传入枚举成员：

<app-export-form
  [exportType]="ExportType.BOOKING"
></app-export-form>

这种写法完全符合严格模板检查的类型要求，后续如果枚举值发生变更，编译阶段就能直接定位到不匹配的调用位置，不会埋下运行时隐患。

如果一定要保留无方括号的静态字符串写法，可以调整@Input的类型定义，将其声明为枚举对应的字符串字面量联合类型，但这种方式会丢失枚举的类型约束能力，不推荐使用：

@Input() exportType: 'receipt' | 'creditcard' | 'booking';

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