angular2ビューテンプレートのenumを渡す

Question

angular2ビューテンプレートでenumを使用できますか？

<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

は、あなたのコンポーネントクラスに親コンポーネント上のあなたの列挙型のプロパティを作成し、列挙型を割り当てるには、その後、あなたのテンプレートでそのプロパティを参照します。

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 ACTIVE_OPTIONS { 
    HOME = 0, 
    USERS = 1, 
    PLAYERS = 2 
} 

あなたの列挙型のリストが

<li [ngClass]="{'active':active==ACTIVE_OPTIONS.HOME}"> 
    <a router-link="/in"> 
    <i class="fa fa-fw fa-dashboard"></i> Home 
    </a> 
</li> 

が楽しむあなたのビューを作成します

export class AppComponent { 
    ACTIVE_OPTIONS: typeof ACTIVE_OPTIONS = ACTIVE_OPTIONS; 
    active:ACTIVE_OPTIONS; 
} 

typeofを持っていると確信しても、あなたのコンポーネントを作成