[解決済み] angular2 のビューテンプレートで enum を渡す

質問

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

しかし、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);
    };
}

これにより、テンプレート内で期待通りの列挙を行うことができます。

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