在 angular2 视图模板中传递枚举

Posted 2023-02-22

【中文标题】在 angular2 视图模板中传递枚举

【英文标题】：Pass enums in angular2 view templates

【发布时间】：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);

【问题讨论】：

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

【参考方案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" />