在 angular2 视图模板中传递枚举答案

【问题标题】：Pass enums in angular2 view templates在 angular2 视图模板中传递枚举
【发布时间】：2016-06-25 17:25:02
【问题描述】：

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

【问题讨论】：

比下面两个答案更好，虽然相似但比接受的答案更简单，是：stackoverflow.com/a/42464835/358578

标签： enums angular angular2-template

【解决方案1】：

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

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>

【讨论】：

根据您的更新，将您的枚举属性声明移至父组件。
哦，当然，从它的上下文中获取。
如果有人在努力让它工作，请注意它是“set dropdownType()”，而不是上面代码中的“setDropDownType()”。我花了一段时间才看到。不过，它也适用于成员变量。
非常确定模板中的dropdownType 两端应该有方括号（例如：[dropdownType]），因为它需要一个var 而不是文本。
对我来说似乎更简单一些，子组件中只有public dropdownTypes = DropdownType;，不需要从父组件中传入任何内容

【解决方案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>

【讨论】：

我自己不是专家，所以我真的不得不质疑：这个解决方案总是比 David L. 的解决方案更好吗？这需要更少的代码行，但就内存使用而言，它可能会为主机组件类的每个实例创建一个列表......如果这是真的（不是说它是！），那么当处理 AppComponent，但在 CustomerComponent 或更频繁的情况下，解决方案可能不是最好的。我说的对吗？
您可以将 html 更新为：[class.active]="active === ACTIVE_OPTIONS.HOME"
Aditya，它更好，原因很简单，它涉及一个类，而不是 2 个。我没有父类，因此不打算创建它:)
@YuriGridin 除了不必要的Parent 类，涉及的原理是一样的。一个只有一个隐式类型，另一个是显式类型。另外，请记住，这不适用于 const enum 类型，因为它们不是作为类创建的，并且它们的类型在转译为 JavaScript 时会被删除。
@crush - 同意

【解决方案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.

【讨论】：

可以说我不给枚举任何值，如果我更改枚举顺序 HTML 将是错误的。我认为这不是一个好方法
启用strictTemplates 时会中断。如果您打算启用此设置，请勿使用此设置。

【解决方案4】：

如果你想获取枚举名称：

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

然后在组件文件中

public gender: typeof Gender = Gender;

在模板中

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

【讨论】：