Passa le enumerazioni nei modelli di vista angolare2


122

Possiamo usare le enumerazioni in un modello di vista angolare2?

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

passa la stringa come input:

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

Ma come passare una configurazione enum? Voglio qualcosa di simile nel modello:

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

Quale sarebbe la migliore pratica?

Modificato: creato un esempio:

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
Meglio di entrambe le risposte qui sotto, anche se simile, ma più semplice di quello accettato, è: stackoverflow.com/a/42464835/358578
pbarranis

Risposte:


131

Crea una proprietà per la tua enumerazione sul componente padre della classe del tuo componente e assegnale l'enumerazione, quindi fai riferimento a quella proprietà nel tuo modello.

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

Ciò consente di enumerare l'enumerazione come previsto nel modello.

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

2
In base all'aggiornamento, sposta la dichiarazione della proprietà enum nel componente padre.
David L

Oh, certo, deriva dal suo contesto.
McLac

8
Di nuovo, downvoter, fornisci un feedback su come migliorare questa risposta se non sei d'accordo.
David L

1
Nel caso qualcuno stia lottando per farlo funzionare, nota che è "set dropdownType ()", non "setDropDownType ()" nel codice sopra. Mi ci è voluto un po 'per vederlo. Funziona anche con una variabile membro.
murrayc

2
Abbastanza sicuro dropdownTypenel modello dovrebbe avere parentesi quadre su entrambe le estremità (in questo modo :) [dropdownType]poiché richiede una variabile e non un testo.
Tom

169

Crea un enum

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

Crea il tuo componente, assicurati che il tuo elenco enum abbia il tipo di

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

Crea la tua vista

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

4
Soluzione migliore di quella accettata. Immagino che utilizzi alcune nuove funzionalità TS.
Greg Dan

2
Non sono uno specialista, quindi devo davvero chiedermi: questa soluzione è sempre migliore di quella di David L.? Questo richiede meno righe di codice, ma in termini di utilizzo della memoria potrebbe creare un elenco per istanza della classe del componente host ... E se questo è vero (non dico che lo sia!), Non c'è un grosso problema quando si tratta di AppComponent, ma la soluzione potrebbe non essere la migliore nel caso di CustomerComponent o qualcosa di più ricorrente. Ho ragione?
Rui Pimentel

2
Puoi aggiornare l'html come: [class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil

6
come e perché è migliore della soluzione accettata @GregDan?
Aditya Vikas Devarapalli

1
Aditya, è meglio per il semplice motivo che coinvolge una classe, non 2. Non ho una classe genitore e non la creerò per questo motivo :)
Yuri Gridin

13

Se vuoi ottenere il nome Enum:

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

quindi nel file del componente

public gender: typeof Gender = Gender;

nel modello

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

2

Forse non devi farlo.

Ad esempio, in Numeric Enum:

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

Nel modello HTML:

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

risultato: dropdownType == DropdownType.account

o String Enum:

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

risultato: dropdownType == DropdownType.currency


Se vuoi ottenere il nome Enum:

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

1
Diciamo che non do alcun valore all'enumerazione, se cambio l'ordine dell'enumerazione l'HTML sarà sbagliato. Penso che questo non sia un buon approccio
André Roggeri Campos il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.