ส่ง enums ในเทมเพลตมุมมอง angular2

เราสามารถใช้ enums ในเทมเพลตมุมมอง 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);
    };
}

แต่จะผ่านการกำหนดค่า enum ได้อย่างไร? ฉันต้องการสิ่งนี้ในเทมเพลต:

<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);

สร้างคุณสมบัติสำหรับ enum ของคุณบนคอมโพเนนต์พาเรนต์ไปยังคลาสคอมโพเนนต์ของคุณและกำหนด enum ให้จากนั้นอ้างอิงคุณสมบัตินั้นในเท็มเพลตของคุณ

export class Parent {
    public dropdownTypes = DropdownType;        
}

export class Dropdown {       
    @Input() public set dropdownType(value: any) {
        console.log(value);
    };
}

สิ่งนี้ช่วยให้คุณสามารถระบุ enum ตามที่คาดไว้ในเทมเพลตของคุณ

<div class="Dropdown" [dropdownType]="dropdownTypes.instrument"></div>

สร้าง enum

enum ACTIVE_OPTIONS {
    HOME = 0,
    USERS = 1,
    PLAYERS = 2
}

สร้างส่วนประกอบของคุณตรวจสอบให้แน่ใจว่ารายการ enum ของคุณมี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>

หากคุณต้องการได้รับชื่อ Enum:

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

จากนั้นในไฟล์คอมโพเนนต์

public gender: typeof Gender = Gender;

ในเทมเพลต

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

บางทีคุณไม่จำเป็นต้องทำเช่นนี้

ตัวอย่างเช่นใน Numeric Enum:

export enum DropdownType {
    instrument = 0,
    account = 1,
    currency = 2
}

ในเทมเพลต HTML:

<div class="Dropdown" [dropdownType]="1"></div>

ผลลัพธ์: dropdownType == DropdownType.account

หรือ String Enum:

export enum DropdownType {
    instrument = "instrument",
    account = "account",
    currency = "currency"
}

<div class="Dropdown" [dropdownType]="'currency'"></div>

ผลลัพธ์: dropdownType == DropdownType.currency

หากคุณต้องการได้รับชื่อ Enum:

val enumValue = DropdownType.currency
DropdownType[enumValue] //  print "currency", Even the "numeric enum" is also.