Meneruskan enum dalam template tampilan angular2


122

Bisakah kita menggunakan enum dalam template tampilan angular2?

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

meneruskan string sebagai input:

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

Tetapi bagaimana cara melewatkan konfigurasi enum? Saya ingin sesuatu seperti ini di template:

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

Apa praktik terbaik?

Diedit: Membuat contoh:

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
Lebih baik dari kedua jawaban di bawah ini, meskipun serupa tetapi lebih sederhana dari yang diterima, adalah: stackoverflow.com/a/42464835/358578
pbarranis

Jawaban:


131

Buat properti untuk enum Anda pada komponen induk ke kelas komponen Anda dan tetapkan enum ke sana, lalu referensikan properti itu di template Anda.

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

Ini memungkinkan Anda untuk menghitung enumerasi seperti yang diharapkan dalam template Anda.

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

2
Berdasarkan update Anda, pindahkan deklarasi properti enum Anda ke komponen induk.
David L

Oh, tentu, dapatkan dari konteksnya.
McLac

8
Sekali lagi, downvoter, berikan umpan balik tentang bagaimana jawaban ini dapat ditingkatkan jika Anda tidak setuju dengannya.
David L

1
Jika ada orang yang kesulitan untuk membuatnya bekerja, perhatikan bahwa ini "set dropdownType ()", bukan "setDropDownType ()" pada kode di atas. Perlu beberapa saat bagi saya untuk melihatnya. Ini juga bekerja dengan variabel anggota.
murrayc

2
Cukup yakin dropdownTypedalam template harus ada tanda kurung siku di kedua ujungnya (seperti :) [dropdownType]karena ini membutuhkan var dan bukan teks.
Tom

169

Buat enum

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

Buat komponen Anda, pastikan daftar enum Anda memiliki tipe

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

Ciptakan tampilan Anda

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

4
Solusi yang lebih baik daripada yang diterima. Saya kira ini menggunakan beberapa fitur TS baru.
Greg Dan

2
Saya sendiri bukan spesialis, jadi saya benar-benar harus bertanya: apakah solusi ini selalu lebih baik daripada solusi David L.? Yang ini membutuhkan lebih sedikit baris kode, tetapi dalam hal penggunaan memori, ini mungkin membuat satu daftar per instance kelas komponen host ... Dan jika ini benar (bukan mengatakannya!), Tidak banyak masalah ketika berurusan dengan AppComponent, tetapi solusinya mungkin bukan yang terbaik dalam kasus CustomerComponent atau sesuatu yang lebih berulang. Apakah saya benar?
Rui Pimentel

2
Anda dapat memperbarui html sebagai: [class.active] = "active === ACTIVE_OPTIONS.HOME"
Neil

6
bagaimana dan mengapa ini lebih baik daripada solusi yang diterima @GregDan?
Aditya Vikas Devarapalli

1
Aditya, lebih baik karena alasan yang sederhana, yaitu melibatkan satu kelas, bukan 2. Saya tidak memiliki kelas induk, dan tidak akan membuatnya karena alasan itu :)
Yuri Gridin

13

Jika Anda ingin mendapatkan nama Enum:

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

lalu di file komponen

public gender: typeof Gender = Gender;

dalam template

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

2

Mungkin Anda tidak perlu melakukan ini.

Misalnya, di Enum Numerik:

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

Dalam Template HTML:

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

hasil: dropdownType == DropdownType.account

atau String Enum:

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

hasil: dropdownType == DropdownType.currency


Jika Anda ingin mendapatkan nama Enum:

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

1
Katakanlah saya tidak memberikan nilai apa pun pada enum, jika saya mengubah urutan enum, HTML akan salah. Saya pikir ini bukan pendekatan yang baik
André Roggeri Campos
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.