在 angular2 视图模板中传递枚举

Question

我们可以在 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);

Answer 1

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

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>

Answer 2

创建 Enum:

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 routerLink="/in">
    <i class="fa fa-fw fa-dashboard"></i> Home
  </a>
</li>

Answer 3

也许你不必这样做。

例如，在数字枚举中：

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.

Answer 4

如果你想获取枚举名称：

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

然后在组件文件中

public gender: typeof Gender = Gender;

在模板中

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

在 angular2 视图模板中传递枚举

Pass enums in angular2 view templates

enums

angular2-template

angular