कोणीय 2 व्यू टेम्प्लेट में एनम पास करें

Question

क्या हम एंगुलर 2 व्यू टेम्प्लेट में एनम का उपयोग कर सकते हैं?

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

इनपुट के रूप में स्ट्रिंग पास करता है:

enum DropdownType {
    instrument,
    account,
    currency
}

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

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

        console.log(value);
    };
}

लेकिन एनम कॉन्फ़िगरेशन कैसे पास करें? मुझे टेम्पलेट में कुछ इस तरह चाहिए:

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

सबसे अच्छा अभ्यास क्या होगा?

संपादित: एक उदाहरण बनाया गया:

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);

Comments

नीचे दिए गए दोनों उत्तरों से बेहतर, हालाँकि एक समान, लेकिन स्वीकार किए गए की तुलना में सरल है: stackoverflow.com/a/42464835/358578

— pbarranis

Answer 1

अपने घटक वर्ग के लिए मूल घटक पर अपनी एनम के लिए एक संपत्ति बनाएँ और उस पर एनम को असाइन करें, फिर अपने टेम्पलेट में उस संपत्ति का संदर्भ दें।

export class Parent {
    public dropdownTypes = DropdownType;        
}

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

यह आपको अपने टेम्प्लेट में अपेक्षित रूप से एनुम को एन्यूमरेट करने की अनुमति देता है।

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

Comments

अपने अपडेट के आधार पर, अपनी एनम प्रॉपर्टी डिक्लेरेशन को मूल घटक में ले जाएँ।

— डेविड एल

ओह, यकीन है, इसके संदर्भ से मिलता है।

— मैकलैक

फिर से, डाउनवॉटर, कृपया प्रतिक्रिया दें कि यदि आप इससे असहमत हैं तो इस उत्तर को कैसे बेहतर बनाया जा सकता है।

— डेविड एल

यदि कोई ऐसा काम करने के लिए संघर्ष कर रहा है, तो ध्यान दें कि यह "सेट ड्रॉपडाउन टाइप ()" है, न कि ऊपर दिए कोड में "सेटड्राडाउनटाइप ()"। मुझे यह देखने में कुछ समय लगा। हालांकि यह सदस्य चर के साथ भी काम करता है।

— मुरैना

dropdownTypeटेम्पलेट में बहुत निश्चित रूप से दोनों सिरों पर वर्ग कोष्ठक होना चाहिए (जैसे [dropdownType]:) क्योंकि यह एक संस्करण लेता है और पाठ नहीं।

— टॉम

Answer 2

एक एनम बनाएँ

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

अपना घटक बनाएं, सुनिश्चित करें कि आपकी Enum सूची में टाइपोफ़ होगा

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

अपना दृश्य बनाएँ

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

Comments

स्वीकार किए गए से बेहतर समाधान। मुझे लगता है कि यह कुछ नए टीएस सुविधा का उपयोग करता है।

— ग्रेग डैन

खुद एक विशेषज्ञ नहीं है, इसलिए मुझे वास्तव में सवाल करना है: क्या यह समाधान हमेशा डेविड एल की तुलना में बेहतर है? यह कोड की कम पंक्तियाँ लेता है, लेकिन स्मृति उपयोग के संदर्भ में यह होस्ट घटक वर्ग के उदाहरण के अनुसार प्रति एक सूची बना सकता है ... और अगर यह सच है (यह नहीं कह रहा है!), तो कोई समस्या नहीं है जब AppComponent से निपटना, लेकिन समाधान CustomerComponent या कुछ अधिक आवर्ती के मामले में सबसे अच्छा नहीं हो सकता है। क्या मैं सही हू?

— रुई पिमेंटेल

आप html को इस रूप में अपडेट कर सकते हैं: [class.active] = "सक्रिय === ACTIVE_OPTIONS.HOME"

— नील

यह कैसे और क्यों स्वीकृत समाधान @GregDan से बेहतर है?

— आदित्य विकास देवरपल्ली

आदित्य, यह सरल कारण के लिए बेहतर है, कि इसमें एक वर्ग शामिल है, न कि 2. मेरे पास कोई अभिभावक वर्ग नहीं है, और इसे इस कारण से नहीं बनाया जा रहा है :)

— यूरी ग्रिडिन

Answer 3

यदि आप Enum नाम प्राप्त करना चाहते हैं:

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

फिर घटक फ़ाइल में

public gender: typeof Gender = Gender;

टेम्पलेट में

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

Answer 4

हो सकता है कि आपको ऐसा न करना पड़े।

उदाहरण के लिए, न्यूमेरिक एनम में:

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

HTML टेम्पलेट में:

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

परिणाम: dropdownType == DropdownType.account

या स्ट्रिंग एनम:

export enum DropdownType {
    instrument = "instrument",
    account = "account",
    currency = "currency"
}

<div class="Dropdown" [dropdownType]="'currency'"></div>

परिणाम: dropdownType == DropdownType.currency

---

यदि आप Enum नाम प्राप्त करना चाहते हैं:

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

Comments

आइए कहते हैं कि मैं एनम को कोई मूल्य नहीं देता, अगर मैं एनम ऑर्डर को बदल देता हूं तो HTML गलत होगा। मुझे लगता है कि यह एक अच्छा दृष्टिकोण नहीं है

— एंड्रे रोजगेरी कैम्पोस