Angular中父组件向子组件传递screenMode参数值异常问题

你的问题是TypeScript数字枚举的默认行为导致的：默认情况下，TypeScript枚举会把成员映射为数字值（比如EDIT_USER对应0，ADD_USER对应1），父组件传递的screenMode实际是枚举的数字值，而子组件定义的@Input() screenMode: string会把数字转成字符串"0"/"1"，并非你期望的枚举键名（"ADD_USER"/"EDIT_USER"）。

下面是两种可行的解决思路：

思路1：子组件直接接收枚举类型（类型更安全） #

1. 确保子组件能访问到screenStateEnum枚举：
   • 把枚举抽成公共的enum.ts文件，或者在子组件中导入父组件所在文件的枚举。
2. 修改子组件的Input定义：

   // add-user.component.ts
   import { screenStateEnum } from '../path-to-parent-component'; // 替换为实际路径
   
   @Input() screenMode: screenStateEnum;
   

3. 子组件内使用时直接和枚举成员比较：

   if (this.screenMode === screenStateEnum.ADD_USER) {
     // 处理新增逻辑
   }
   

思路2：父组件传递枚举键名字符串给子组件 #

如果你确实需要子组件接收字符串类型的键名，按以下步骤修改：

1. 父组件类中暴露枚举给模板使用（确保模板能访问到screenStateEnum）：

   // 父组件.ts文件
   screenStateEnum = screenStateEnum; // 把枚举挂载到组件实例上
   

2. 修改父组件模板的绑定，通过枚举反向映射获取键名字符串：

   <add-user [screenMode]="screenStateEnum[screenMode]" [userId]="selectedRow?.userId" (goToUsers)="refresh()"></add-user>
   

   这样传递给子组件的就是"ADD_USER"或"EDIT_USER"字符串了。

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