typescript - একটি Angular2 ngSwitch বিবৃতিতে কীভাবে টাইপস্ক্রিপ্ট এনাম মান ব্যবহার করবেন use




(6)

টাইপসক্রিপ্ট এনাম অ্যাঙ্গুলার 2 এর এনজিউইচ নির্দেশনার সাথে একটি প্রাকৃতিক মিল বলে মনে হচ্ছে। তবে যখন আমি আমার উপাদানগুলির টেমপ্লেটে এনাম ব্যবহার করার চেষ্টা করি তখন আমি "অপরিবর্তিত ইনফরমেশন 'এক্সএক্সএক্সএক্স' পড়তে পারি না ..."। আমি কীভাবে আমার উপাদানগুলির টেমপ্লেটে এনাম মানগুলি ব্যবহার করতে পারি?

দয়া করে মনে রাখবেন যে এনাম (এনজিফোর্ড) এর সমস্ত মানের উপর নির্ভর করে এইচটিএমএল নির্বাচন বিকল্পগুলি কীভাবে তৈরি করা যায় তার থেকে এটি আলাদা। এই প্রশ্নটি এনজিউইচ সম্পর্কিত একটি এনামের নির্দিষ্ট মানের উপর ভিত্তি করে। যদিও এনামের সাথে শ্রেণিক-অভ্যন্তরীণ রেফারেন্স তৈরি করার একই পদ্ধতির উপস্থিতি ঘটে।


'আমি কি সত্যিই এটি করতে চাই?' বিবেচনা করে শুরু করুন

সরাসরি এইচটিএমএলে এনামগুলিকে উল্লেখ করার ক্ষেত্রে আমার কোনও সমস্যা নেই, তবে কিছু ক্ষেত্রে এমন ক্লিনার বিকল্প রয়েছে যা টাইপ-নিরাপদ-নেসটি হারাবেন না। উদাহরণস্বরূপ আপনি যদি আমার অন্যান্য উত্তরে দেখানো পন্থাটি চয়ন করেন, আপনি নিজের উপাদানটিতে টিটিটিকে এই জাতীয় কিছু ঘোষণা করতে পারেন:

public TT = 
{
    // Enum defines (Horizontal | Vertical)
    FeatureBoxResponsiveLayout: FeatureBoxResponsiveLayout   
}

আপনার এইচটিএমএলটিতে একটি ভিন্ন লেআউট দেখানোর জন্য, প্রতিটি লেআউট প্রকারের জন্য আপনার একটি *ngIf এবং আপনি সরাসরি আপনার উপাদানটির এইচটিএমএলে *ngIf উল্লেখ করতে পারেন:

*ngIf="(featureBoxResponsiveService.layout | async) == TT.FeatureBoxResponsiveLayout.Horizontal"

এই উদাহরণটি বর্তমান লেআউটটি পেতে একটি পরিষেবা ব্যবহার করে, এটি অ্যাসিঙ্ক পাইপ দিয়ে চালায় এবং তারপরে এটি আমাদের এনাম মানের সাথে তুলনা করে। এটি দেখতে বেশ ভার্জোজ, সংশ্লেষিত এবং দেখতে খুব মজাদার নয়। এটি এনামের নামটিও প্রকাশ করে, যা নিজে অতিরিক্ত মাত্রায় ভার্জোজ হতে পারে।

বিকল্প, এটি এইচটিএমএল থেকে টাইপ সুরক্ষা বজায় রাখে

বিকল্পভাবে আপনি নিম্নলিখিতটি করতে পারেন, এবং আপনার উপাদানগুলির .ts ফাইলে আরও পাঠযোগ্য ফাংশন ঘোষণা করতে পারেন:

*ngIf="isResponsiveLayout('Horizontal')"

অনেক ক্লিনার! তবে কেউ যদি ভুল করে 'Horziontal' টাইপ করেন? আপনি এইচটিএমএলে এনাম ব্যবহার করতে চেয়েছিলেন তার পুরো কারণটি কি টাইপসেফ হওয়া উচিত?

আমরা keyof এবং কিছু টাইপ keyof যাদু দ্বারা এখনও এটি অর্জন করতে পারি। এটি ফাংশনটির সংজ্ঞা:

isResponsiveLayout(value: keyof typeof FeatureBoxResponsiveLayout)
{
    return FeatureBoxResponsiveLayout[value] == this.featureBoxResponsiveService.layout.value;
}

FeatureBoxResponsiveLayout[string] -এর FeatureBoxResponsiveLayout[string] নোট করুন যা FeatureBoxResponsiveLayout[string] সংখ্যাসূচক মানকে দেওয়া স্ট্রিংয়ের মানকে converts করে।

আপনি যদি একটি অবৈধ মান ব্যবহার করেন এটি একটি এওটি সংকলন সহ একটি ত্রুটি বার্তা দেবে।

"H4orizontal" "প্রকারের আর্গুমেন্টটি" "উল্লম্ব" টাইপের প্যারামিটারে নির্ধারিত নয় "অনুভূমিক"

বর্তমানে ভিএসকোড এইচটিএমএল সম্পাদকটিতে H4orizontal আন্ডারলাইন করতে যথেষ্ট স্মার্ট নয়, তবে আপনি সংকলন সময়ে (- প্রোড বিল্ড বা --আওট স্যুইচ সহ) সতর্কতাটি পাবেন। ভবিষ্যতের আপডেটে এটিরও উন্নতি হতে পারে।


@ এরিক লিজের সাজসজ্জার বিকল্প হিসাবে, যা দুর্ভাগ্যক্রমে --aot (এবং এইভাবে - --prod ) তৈরি করে কাজ করে না, আমি এমন একটি পরিষেবা ব্যবহার করেছি যা আমার অ্যাপ্লিকেশনটির সমস্ত --aot করে --aot একটি সরল নামের অধীনে প্রয়োজন এমন প্রতিটি উপাদানটিতে কেবল এটি প্রকাশ্যে ইনজেক্ট করা দরকার, এর পরে আপনি নিজের দর্শনগুলির মধ্যে এনামগুলিতে অ্যাক্সেস করতে পারবেন। উদাহরণ:

সেবা

import { Injectable } from '@angular/core';
import { MyEnumType } from './app.enums';

@Injectable()
export class EnumsService {
  MyEnumType = MyEnumType;
  // ...
}

এটিকে আপনার মডিউল সরবরাহকারীর তালিকায় অন্তর্ভুক্ত করতে ভুলবেন না।

উপাদান শ্রেণি

export class MyComponent {
  constructor(public enums: EnumsService) {}
  @Input() public someProperty: MyEnumType;

  // ...
}

উপাদান এইচটিএমএল

<div *ngIf="someProperty === enums.MyEnumType.SomeValue">Match!</div>

আপনি enums সম্পর্কে সচেতন করতে আপনার উপাদান যুক্ত করতে একটি কাস্টম ডেকোরেটর তৈরি করতে পারেন।

myenum.enum.ts:

export enum MyEnum {
    FirstValue,
    SecondValue
}

myenumaware.decorator.ts

import { MyEnum } from './myenum.enum';

export function MyEnumAware(constructor: Function) {
    constructor.prototype.MyEnum = MyEnum;
}

enum-aware.component.ts

import { Component } from '@angular2/core';
import { MyEnum } from './myenum.enum';
import { MyEnumAware } from './myenumaware.decorator';

@Component({
  selector: 'enum-aware',
  template: `
    <div [ngSwitch]="myEnumValue">
      <div *ngSwitchCase="MyEnum.FirstValue">
        First Value
      </div>
      <div *ngSwitchCase="MyEnum.SecondValue">
        Second Value
      </div>
    </div>
    <button (click)="toggleValue()">Toggle Value</button>
  `,
})
@MyEnumAware // <---------------!!!
export default class EnumAwareComponent {
  myEnumValue: MyEnum = MyEnum.FirstValue;

  toggleValue() {
    this.myEnumValue = this.myEnumValue === MyEnum.FirstValue
        ? MyEnum.SecondValue : MyEnum.FirstValue;
  }
}

আপনি আপনার উপাদান শ্রেণিতে এনামের জন্য একটি রেফারেন্স তৈরি করতে পারেন (আমি সবেমাত্র প্রাথমিক চরিত্রটিকে ছোট-ছোট হিসাবে পরিবর্তন করেছি) এবং তারপরে টেমপ্লেট থেকে এই রেফারেন্সটি ব্যবহার করতে পারেন ( plunker ):

import {Component} from 'angular2/core';

enum CellType {Text, Placeholder}
class Cell {
  constructor(public text: string, public type: CellType) {}
}
@Component({
  selector: 'my-app',
  template: `
    <div [ngSwitch]="cell.type">
      <div *ngSwitchCase="cellType.Text">
        {{cell.text}}
      </div>
      <div *ngSwitchCase="cellType.Placeholder">
        Placeholder
      </div>
    </div>
    <button (click)="setType(cellType.Text)">Text</button>
    <button (click)="setType(cellType.Placeholder)">Placeholder</button>
  `,
})
export default class AppComponent {

  // Store a reference to the enum
  cellType = CellType;
  public cell: Cell;

  constructor() {
    this.cell = new Cell("Hello", CellType.Text)
  }

  setType(type: CellType) {
    this.cell.type = type;
  }
}

আরসি .6 / ফাইনাল হিসাবে

...

export enum AdnetNetworkPropSelector {
    CONTENT,
    PACKAGE,
    RESOURCE
}

<div style="height: 100%">
          <div [ngSwitch]="propSelector">
                 <div *ngSwitchCase="adnetNetworkPropSelector.CONTENT">
                      <AdnetNetworkPackageContentProps [setAdnetContentModels]="adnetNetworkPackageContent.selectedAdnetContentModel">
                                    </AdnetNetworkPackageContentProps>
                  </div>
                 <div *ngSwitchCase="adnetNetworkPropSelector.PACKAGE">
                </div>
            </div>              
        </div>


export class AdnetNetwork {       
    private adnetNetworkPropSelector = AdnetNetworkPropSelector;
    private propSelector = AdnetNetworkPropSelector.CONTENT;
}

এটি সহজ এবং একটি কবজির মতো কাজ করে :) কেবল আপনার এনামটিকে এটির মতো ঘোষণা করুন এবং আপনি এটি HTML টেমপ্লেটে ব্যবহার করতে পারেন

  statusEnum: typeof SatusEnum = SatusEnum;




angular