我们可以在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);
在组件类的父组件上为枚举创建一个属性,并为其分配枚举,然后在模板中引用该属性。
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 ACTIVE_OPTIONS {
HOME = 0,
USERS = 1,
PLAYERS = 2
}
创建您的组件,确保您的枚举列表具有typeof
export class AppComponent {
ACTIVE_OPTIONS = ACTIVE_OPTIONS;
active:ACTIVE_OPTIONS;
}
创建您的视图
<li [ngClass]="{'active':active==ACTIVE_OPTIONS.HOME}">
<a router-link="/in">
<i class="fa fa-fw fa-dashboard"></i> Home
</a>
</li>
也许你不必这样做。
例如,在Numeric Enum中:
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
如果你想得到枚举名称:
val enumValue = DropdownType.currency
DropdownType[enumValue] // print "currency", Even the "numeric enum" is also.