Passer les énumérations dans les modèles de vue angular2


122

Pouvons-nous utiliser des énumérations 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 ça dans le modèle:

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

Quelle serait la meilleure pratique?

Modifié: création d'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);

2
Mieux que les deux réponses ci-dessous, bien que similaire mais plus simple que celle acceptée, c'est: stackoverflow.com/a/42464835/358578
pbarranis

Réponses:


131

Créez une propriété pour votre énumération sur le composant parent de votre classe de composant et affectez-lui l'énumération, puis référencez 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'énumération comme prévu dans votre modèle.

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

2
En fonction de votre mise à jour, déplacez votre déclaration de propriété enum vers le composant parent.
David L

Oh, bien sûr, tire de son contexte.
McLac

8
Encore une fois, électeur défavorable, veuillez fournir des commentaires sur la façon dont cette réponse peut être améliorée si vous n'êtes pas d'accord avec elle.
David L

1
Au cas où quelqu'un aurait du mal à faire fonctionner cela, notez que c'est "set dropdownType ()", pas "setDropDownType ()" dans le code ci-dessus. Il m'a fallu un certain temps pour voir ça. Cela fonctionne également avec une variable membre.
murrayc

2
À peu près sûr, dropdownTypele modèle devrait avoir des crochets aux deux extrémités (comme ceci:) [dropdownType]car il prend une variable et non du texte.
Tom

169

Créer une énumération

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

Créez votre composant, assurez-vous que votre liste d'énumérations aura le type

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

Créez votre vue

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

4
Meilleure solution que celle acceptée. Je suppose qu'il utilise une nouvelle fonctionnalité TS.
Greg Dan

2
Pas un spécialiste moi-même, alors je dois vraiment me demander: cette solution est-elle toujours meilleure que celle de David L.? Celui-ci prend moins de lignes de code, mais en termes d'utilisation de la mémoire, il peut créer une liste par instance de la classe de composant hôte ... Et si cela est vrai (sans le dire!), Il n'y a pas beaucoup de problème lorsque traitant avec AppComponent, mais la solution n'est peut-être pas la meilleure dans le cas d'un CustomerComponent ou de quelque chose de plus récurrent. Ai-je raison?
Rui Pimentel le

2
Vous pouvez mettre à jour le code HTML comme suit: [class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil

6
comment et pourquoi est-ce mieux que la solution acceptée @GregDan?
Aditya Vikas Devarapalli

1
Aditya, c'est mieux pour la simple raison que cela implique une classe, pas 2. Je n'ai pas de classe parent, et je ne vais pas la créer pour cette raison :)
Yuri Gridin

13

Si vous voulez obtenir le nom Enum:

export enum Gender {
       Man = 1,
       Woman = 2
   }

puis dans le fichier du composant

public gender: typeof Gender = Gender;

dans le modèle

<input [value]="gender.Man" />

2

Peut-être que vous n'êtes pas obligé de faire ça.

Par exemple, dans Numeric Enum:

export enum DropdownType {
    instrument = 0,
    account = 1,
    currency = 2
}

Dans le modèle HTML:

<div class="Dropdown" [dropdownType]="1"></div>

résultat: dropdownType == DropdownType.account

ou String Enum:

export enum DropdownType {
    instrument = "instrument",
    account = "account",
    currency = "currency"
}
<div class="Dropdown" [dropdownType]="'currency'"></div>

résultat: dropdownType == DropdownType.currency


Si vous voulez obtenir le nom Enum:

val enumValue = DropdownType.currency
DropdownType[enumValue] //  print "currency", Even the "numeric enum" is also. 

1
Disons que je ne donne aucune valeur à l'énumération, si je change l'ordre d'énumération, le HTML sera erroné. Je pense que ce n'est pas une bonne approche
André Roggeri Campos le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.