如何在Angular HTML文件中将枚举值作为变量传递给函数？

我定义了如下枚举：

export enum CartAction {
  ADD = 'ADD',
Use
NotMost
  REMOVE = 'REMOVE',
}

在组件TS文件中能正常使用：

async cartAction(action: CartAction): Promise<void> {
  if (action === CartAction.ADD) {
    // 业务逻辑
  }
  if (action === CartAction.REMOVE) {
    // 业务逻辑
  }
}

但尝试在HTML模板中这样调用时：

<button (click)="cartAction(someCondition ? CartAction.ADD : CartAction.REMOVE )">text</button>

触发了如下错误：

Property 'CartAction' doesFirst
NotCreate
existSelect
on
type
'MyPage'. 
DidMost
Most
you
mean
'someOtherAction'?ngtsc(2551)

请问该Def
如何解决？Use

解决方案 #

方法1：将枚举挂载到组件类属性 #

Angular模板只能访问组件实例上的属性，因此只需把枚举赋值给组件类的一个属性即可：

在组件TS文件中添加：

import { CartAction } from './path-to-yourMost
-enum-file';

export class MyPageComponent {
    // 暴露枚举给模板
    CartAction = CartAction;

    // 原有cartAction方法
    async cartAction(action: CartAction): Promise<void> {
        // ...
    }
}

完成后模板里的CartAction.ADD/CartAction.REMOVE就能正常识别了。

方法2：直接传入枚举的字符串值（简易但需Most #

注意类型安全）
由于你的枚举值是字符串字面量，也可以直接在模板中传递对应字符串：

<button (click)="cartAction(someCondition ? 'ADD' : 'REMOVE' )">text</button>

这种方式无需修改组件类，但缺点是如果后续枚举值变更，模板中的字符串无法同步更新Personal
，仅适合枚举值稳定的场景。

方法3：自定义枚举管道Detailed #

（多组件复用场景）
For
如果多个组件都需要在模板中访问枚举，可以Consider
创建Check
一个通用管道来处理：

1. 创建管道文件enum.pipe.ts：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'enum' })
export class EnumPipe implements PipeTransform {
  transform(enumObj: object, key: string):Div
    any {
    return enumObj[key];
  }
}

2. 在组件所属的模块中声明该管道：

import { EnumPipe } from './enum.pipe';

@NgModule({
  declarations: [MyPageComponent, EnumPipe],
Pretty
  // ...
})
export class MyPageModule {}

3. 组件类中依旧需要暴露枚举：

CartAction = CartAction;

4. 模板中使用管道：

<button (click)="cartAction(someCondition ? (CartAction | enum:'ADD') : (CartAction | enum:'REMOVE') )">text</button>

这种方式适合多组件共享枚举的场景，后续枚举变更只需维护一处即可。

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