通过枚举在角度2视图模板

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

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

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>

原文链接：https://www.f2er.com/angularjs/144322.html

通过枚举在角度2视图模板

猜你在找的Angularjs相关文章