Vượt qua các enums trong các khung nhìn góc nhìn2

Question

Chúng ta có thể sử dụng enums trong một mẫu khung nhìn angular2 không?

<div class="Dropdown" dropdownType="instrument"></div> 

vượt qua chuỗi như là đầu vào:

enum DropdownType { 
     instrument, 
     account, 
     currency 
    } 

    @Component({ 
     selector: '[.Dropdown]', 
    }) 
    export class Dropdown { 

     @Input() public set dropdownType(value: any) { 

      console.log(value); 
     }; 
    } 

Nhưng làm thế nào để vượt qua một cấu hình enum? Tôi muốn một cái gì đó như thế này trong mẫu:

<div class="Dropdown" dropdownType="DropdownType.instrument"></div> 

Thực tiễn nào là tốt nhất?

được sửa đổi: Tạo một ví dụ:

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

Tạo một tài sản cho enum của bạn trên các thành phần cha mẹ đến lớp thành phần của bạn và gán enum với nó, sau đó tham khảo tài sản đó trong mẫu của bạn.

export class Parent { 
    public dropdownTypes = DropdownType;   
} 

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

Điều này cho phép bạn liệt kê enum như mong đợi trong mẫu của bạn.

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

Answer 2

Đây là giải pháp.

Tạo một enum

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

Tạo thành phần của bạn, hãy chắc chắn danh sách enum của bạn sẽ có typeof

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

Tạo tầm nhìn của bạn

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

ENJOY