Passer les enums angular2 afficher les modèles

pouvons-nous utiliser enums dans un modèle de vue angular2?

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

passe la chaîne en entrée:

    enum DropdownType {
        instrument,
        account,
        currency
    }

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

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

            console.log(value);
        };
    }

mais comment passer une configuration enum? Je veux quelque chose comme cela dans le modèle:

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

Quelle serait la meilleure pratique?

édité: Créé un exemple:

    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);
46
demandé sur McLac 2016-03-10 20:50:19

2 réponses

créer une propriété pour votre enum sur le composant parent de votre classe component et lui assigner l'enum, puis référencer cette propriété dans votre modèle.

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

cela vous permet d'énumérer l'enum comme prévu dans votre modèle.

<div class="Dropdown" dropdownType="dropdownTypes.instrument"></div>
54
répondu David L 2016-03-10 22:49:51

Voici une solution.

Créer un enum

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

Créez votre composant, assurez-vous que votre enum liste aura le typeof

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

Créer votre vue

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

ENJOY

68
répondu Oswaldo Alvarez 2016-10-14 02:44:30