কৌণিক 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 তালিকা থাকবে typeof

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

গৃহীত একের চেয়ে ভাল সমাধান। আমার ধারণা এটিতে কিছু নতুন টিএস বৈশিষ্ট্য ব্যবহৃত হয়েছে।

— গ্রেগ ড্যান

আমি নিজেই বিশেষজ্ঞ নই, তাই আমাকে সত্যিই প্রশ্ন করতে হবে: এই সমাধানটি কি ডেভিড এল এর চেয়ে সর্বদা ভাল? এটি একটি কোডের কম লাইন গ্রহণ করে, তবে মেমরির ব্যবহারের ক্ষেত্রে এটি হোস্ট উপাদান উপাদান শ্রেণীর উদাহরণ অনুসারে একটি তালিকা তৈরি করতে পারে ... এবং যদি এটি সত্য হয় (এটি এটি না বলে!), তখন খুব বেশি সমস্যা নেই অ্যাপকোম্পোনেন্টের সাথে ডিল করছেন, তবে গ্রাহক কম্পোনেন্ট বা আরও কিছু বার বার আসার ক্ষেত্রে সমাধানটি সেরা নাও হতে পারে। আমি কি সঠিক?

— রুই পাইমেটেল

আপনি এইচটিএমএল হিসাবে আপডেট করতে পারবেন: [শ্রেণি.অ্যাকটিভ] = "সক্রিয় === ACTIVE_OPTIONS.HOME"

— নীল

গৃহীত সমাধান @ গ্রেগড্যানের চেয়ে এটি কীভাবে এবং কেন ভাল?

— আদিত্য বিকাশ দেবরপল্লি

আদিত্য, সহজ কারণেই এটি আরও ভাল, এটিতে একটি শ্রেণি জড়িত, ২ নয় I আমার কোনও পিতামাতার ক্লাস নেই এবং সেই কারণেই এটি তৈরি করতে যাচ্ছেন না :)

— ইউরি গ্রিডিন

Answer 3

আপনি চাইলে এনামের নাম পান:

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
}

এইচটিএমএল টেমপ্লেটে:

<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

---

আপনি চাইলে এনামের নাম পান:

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

Comments

বলুন আমি এনামকে কোনও মান দেব না, যদি আমি এনাম ক্রম পরিবর্তন করি তবে এইচটিএমএল ভুল হবে। আমি মনে করি এটি একটি ভাল পদ্ধতির নয়

— আন্দ্রে রোগেরি ক্যাম্পোস