在angular2视图模板中传递枚举


122

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

2
比下面两个答案都好,尽管相似但比公认的答案简单,是:stackoverflow.com/a/42464835/358578
pbarranis

Answers:


131

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

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>

2
根据您的更新,将您的枚举属性声明移动到父组件。
David L

哦,当然,是从上下文中获取的。
McLac

8
再次,请支持者,如果您不同意此答案,请提供有关如何改善此答案的反馈。
David L

1
万一有人在努力使它正常工作,请注意,上面的代码中它是“ set dropdownType()”,而不是“ setDropDownType()”。我花了一段时间才看到。它也可以与成员变量一起使用。
Murrayc

2
可以肯定的dropdownType是,模板中的两端都应带有方括号(例如:),[dropdownType]因为它需要一个var而不是文本。
汤姆(Tom)

169

创建一个枚举

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>

4
比公认的解决方案更好。我猜它使用了一些新的TS功能。
格雷格·丹

2
我自己不是专家,所以我真的要问:这种解决方案是否总是比David L.的解决方案更好?这需要较少的代码行,但是就内存使用而言,它可能会在主机组件类的每个实例中创建一个列表...如果这是正确的(不是说是这样!),那么当处理AppComponent,但对于CustomerComponent或更经常出现的情况,解决方案可能不是最好的。我对吗?
Rui Pimentel

2
您可以将html更新为:[class.active] =“ active === ACTIVE_OPTIONS.HOME”
Neil

6
与公认的解决方案@GregDan相比,这有何优势?为什么?
Aditya Vikas Devarapalli,

1
Aditya,最好是因为一个简单的原因,那就是只涉及一个类,而不是2个类。我没有一个父类,也不打算为此创建它:)
Yuri Gridin

13

如果要获取枚举名称:

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

然后在组件文件中

public gender: typeof Gender = Gender;

在模板中

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

2

也许您不必这样做。

例如,在数字枚举中:

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. 

1
可以说我不给枚举任何值,如果我更改了枚举顺序,则HTML将会是错误的。我认为这不是一个好办法
安德烈Roggeri坎波斯
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.