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

发布时间：2020-12-17 08:09:43 所属栏目：安全来源：网络整理

导读：我们可以在angular2视图模板中使用枚举吗？ div class="Dropdown" dropdownType="instrument"/div 传递字符串作为输入： enum DropdownType { instrument,account,currency } @Component({ selector: '[.Dropdown]',}) export class Dropdown { @Input() pub

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!