在 angular2视图模板中传递枚举

我们可以在 angular2视图模板中使用枚举吗？

<div class="Dropdown" dropdownType="instrument"></div>

传递字符串作为输入:

enum DropdownType {
instrument,
account,
currency
}


@Component({
selector: '[.Dropdown]',
})
export class Dropdown {


@Input() public set dropdownType(value: any) {


console.log(value);
};
}

但是如何传递一个枚举配置呢:

<div class="Dropdown" dropdownType="DropdownType.instrument"></div>

最好的做法是什么？

编辑: 创造了一个例子:

import {bootstrap} from 'angular2/platform/browser';
import {Component, View, Input} from 'angular2/core';


export enum DropdownType {


instrument = 0,
account = 1,
currency = 2
}


@Component({selector: '[.Dropdown]',})
@View({template: ''})
export class Dropdown {


public dropdownTypes = DropdownType;


@Input() public set dropdownType(value: any) {console.log(`-- dropdownType: ${value}`);};
constructor() {console.log('-- Dropdown ready --');}
}


@Component({ selector: 'header' })
@View({ template: '<div class="Dropdown" dropdownType="dropdownTypes.instrument"> </div>', directives: [Dropdown] })
class Header {}


@Component({ selector: 'my-app' })
@View({ template: '<header></header>', directives: [Header] })
class Tester {}


bootstrap(Tester);
105649 次浏览
小开
最佳答案

为父组件上的枚举创建一个属性，并将枚举分配给组件类，然后在模板中引用该属性。

export class Parent {
public dropdownTypes = DropdownType;
}


export class Dropdown {
@Input() public set dropdownType(value: any) {
console.log(value);
};
}

这允许您按照模板中的预期枚举枚举。

<div class="Dropdown" [dropdownType]="dropdownTypes.instrument"></div>
小开

创建 Enum:

enum ACTIVE_OPTIONS {
HOME = 0,
USERS = 1,
PLAYERS = 2
}

创建一个组件，确保枚举列表中包含 类型:

export class AppComponent {
ACTIVE_OPTIONS = ACTIVE_OPTIONS;
active: ACTIVE_OPTIONS;
}

创建一个模板:

<li [ngClass]="{ 'active': active === ACTIVE_OPTIONS.HOME }">
<a routerLink="/in">
<i class="fa fa-fw fa-dashboard"></i> Home
</a>
</li>
小开

也许你不必这么做。

例如，在数字枚举中:

export enum DropdownType {
instrument = 0,
account = 1,
currency = 2
}

HTML 模板:

<div class="Dropdown" [dropdownType]="1"></div>

结果: dropdownType == DropdownType.account

或字符串枚举:

export enum DropdownType {
instrument = "instrument",
account = "account",
currency = "currency"
}

<div class="Dropdown" [dropdownType]="'currency'"></div>

结果: dropdownType == DropdownType.currency

如果要获取 Enum name:

val enumValue = DropdownType.currency
DropdownType[enumValue] //  print "currency", Even the "numeric enum" is also.
小开

如果要获取 Enum name:

export enum Gender {
Man = 1,
Woman = 2
}

然后在组件文件中

public gender: typeof Gender = Gender;

模板

<input [value]="gender.Man" />
小开

我来晚了。

你可以使用 ...set (value: keyof DropdownType)...

这样，只能用枚举中的键调用该函数。

之后，只需将字符串值转换为枚举值即可。这在 TypeScript 中是不可能的，但是我们可以使用一个变通方法:

TS 中的枚举将被编译为

var DropdownType = {
instrument = 0,
account = 1,
currency = 2
};


Object.freeze(DropdownType);

因为在编译之后，enum 变成了一个不可变物件，所以我们可以使用密钥的名称作为索引器。我们只需要绕过编译器:

@Input() public set dropdownType(value: keyof DropdownType) {
const enumValue = (DropdownType as any)[value] as DropdownType;
console.log(enumValue);
};

但是要注意，如果一个枚举类型被添加到 JS，这可能不再起作用。由于我们正在围绕编译器工作，它不会警告您任何错误发生。

此外，只有当 IDE 足够聪明时，自动完成才能正常工作。我的 VSCode 工作区不会自动完成，但 WebStorm 会。

编辑:

如果您以这种方式更频繁地使用枚举，我建议您在项目的某个地方创建一个静态 helper 函数:

function getValueFromEnum<T extends {[key: string]: string | number}>(
e: T,
key: keyof T
) {
return e[key];
}

提交答案