วิธีใช้ค่า typescript enum ในคำสั่ง Angular2 ngSwitch

typescript enum ดูเหมือนว่าจะเป็นไปตามธรรมชาติกับคำสั่ง ngSwitch ของ Angular2 แต่เมื่อฉันพยายามใช้ enum ในแม่แบบขององค์ประกอบฉันได้รับ "ไม่สามารถอ่านคุณสมบัติ 'xxx' ของไม่ได้กำหนดใน ... " ฉันจะใช้ค่า enum ในแม่แบบองค์ประกอบของฉันได้อย่างไร

โปรดทราบว่าสิ่งนี้แตกต่างจากวิธีการสร้างตัวเลือกการเลือก html ตามค่าทั้งหมดของ enum (ngFor) คำถามนี้เกี่ยวกับ ngSwitch ตามค่าเฉพาะของ enum แม้ว่าวิธีการเดียวกันในการสร้างการอ้างอิงภายในคลาสถึง enum จะปรากฏขึ้น

คุณสามารถสร้างการอ้างอิงไปยัง enum ในคลาสคอมโพเนนต์ของคุณ (ฉันเพิ่งเปลี่ยนอักขระเริ่มต้นเป็นตัวพิมพ์เล็ก) จากนั้นใช้การอ้างอิงนั้นจากเทมเพลต ( พลั่วเกอร์ ):

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

คุณสามารถสร้างมัณฑนากรที่กำหนดเองเพื่อเพิ่มองค์ประกอบของคุณเพื่อให้ตระหนักถึง 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;
  }
}

สิ่งนี้ง่ายและใช้งานได้อย่างมีเสน่ห์ :) เพียงประกาศ enum ของคุณแบบนี้และคุณสามารถใช้มันในเทมเพลต HTML

  statusEnum: typeof StatusEnum = StatusEnum;

Angular4 - การใช้ Enum ในเทมเพลต HTML ngSwitch / ngSwitchCase

ทางออกที่นี่: https://stackoverflow.com/a/42464835/802196

เครดิต: @snorkpete

ในองค์ประกอบของคุณคุณมี

enum MyEnum{
  First,
  Second
}

จากนั้นในองค์ประกอบของคุณคุณจะนำประเภท Enum ผ่านสมาชิก 'MyEnum' และสร้างสมาชิกอีกคนสำหรับตัวแปร enum ของคุณ 'myEnumVar':

export class MyComponent{
  MyEnum = MyEnum;
  myEnumVar:MyEnum = MyEnum.Second
  ...
}

ตอนนี้คุณสามารถใช้ myEnumVar และ MyEnum ในเทมเพลต. html ของคุณ เช่นการใช้ Enums ใน ngSwitch:

<div [ngSwitch]="myEnumVar">
  <div *ngSwitchCase="MyEnum.First"><app-first-component></app-first-component></div>
  <div *ngSwitchCase="MyEnum.Second"><app-second-component></app-second-component></div>
  <div *ngSwitchDefault>MyEnumVar {{myEnumVar}} is not handled.</div>
</div>

ตั้งแต่ rc.6 / final

...

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

เป็นทางเลือกของมัณฑนากรของ @Eric Lease ซึ่งน่าเสียดายที่ไม่สามารถใช้งานได้ --aot (และเช่นนั้น--prod) ฉันได้ใช้บริการที่ทำให้แอปพลิเคชันทั้งหมดของฉันปรากฏ เพียงแค่ต้องทำการแทรกสิ่งนั้นลงในแต่ละองค์ประกอบที่ต้องใช้ภายใต้ชื่อง่าย ๆ หลังจากนั้นคุณสามารถเข้าถึง enums ในมุมมองของคุณ เช่น:

บริการ

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;

  // ...
}

ส่วนประกอบ html

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

เริ่มต้นด้วยการพิจารณา 'ฉันจริง ๆต้องการที่จะทำเช่นนี้?'

ฉันไม่มีปัญหาในการอ้างถึง enums โดยตรงใน HTML แต่ในบางกรณีมีทางเลือกที่สะอาดกว่าที่ไม่สูญเสียความปลอดภัยประเภท ตัวอย่างเช่นหากคุณเลือกวิธีที่แสดงในคำตอบอื่น ๆ ของฉันคุณอาจประกาศ TT ในองค์ประกอบของคุณดังนี้:

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

ในการแสดงเลย์เอาต์ที่แตกต่างใน HTML ของคุณคุณจะต้องมี*ngIfเลย์เอาต์แต่ละประเภทและคุณสามารถอ้างอิงโดยตรงกับ enum ใน HTML ของส่วนประกอบของคุณ:

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

ตัวอย่างนี้ใช้บริการเพื่อรับเค้าโครงปัจจุบันเรียกใช้ผ่านท่อ async แล้วเปรียบเทียบกับค่า enum ของเรา เป็นเรื่องที่ค่อนข้างละเอียดซับซ้อนและไม่ค่อยสนุกที่จะดู นอกจากนี้ยังเปิดเผยชื่อของ enum ซึ่งตัวเองอาจจะ verbose มากเกินไป

อีกทางเลือกหนึ่งที่รักษาความปลอดภัยประเภทจาก HTML

หรือคุณสามารถทำสิ่งต่อไปนี้และประกาศฟังก์ชั่นที่อ่านได้มากขึ้นในไฟล์. ts ของส่วนประกอบ:

*ngIf="isResponsiveLayout('Horizontal')"

ทำความสะอาดมาก! แต่ถ้ามีคนพิมพ์'Horziontal'ผิดพลาดล่ะ? เหตุผลทั้งหมดที่คุณต้องการใช้ enum ใน HTML นั้นเพื่อความปลอดภัย

เรายังคงสามารถบรรลุได้ด้วยkeyofและเวทมนต์บทกลอนบางส่วน นี่คือนิยามของฟังก์ชัน:

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

สังเกตการใช้งานFeatureBoxResponsiveLayout[string]ที่แปลงค่าสตริงที่ส่งผ่านไปเป็นค่าตัวเลขของ enum

สิ่งนี้จะให้ข้อความแสดงข้อผิดพลาดพร้อมการรวบรวม AOT หากคุณใช้ค่าที่ไม่ถูกต้อง

อาร์กิวเมนต์ประเภท '"H4 แนวนอน"' ไม่สามารถกำหนดให้กับพารามิเตอร์ประเภท "" แนวตั้ง "| "แนวนอน"

ปัจจุบัน VSCode ยังไม่ฉลาดพอที่จะขีดเส้นใต้H4orizontalในตัวแก้ไข HTML แต่คุณจะได้รับคำเตือนในเวลารวบรวม (ด้วย --prod build หรือ --aot switch) สิ่งนี้อาจได้รับการปรับปรุงในการปรับปรุงในอนาคต

ส่วนประกอบของฉันใช้วัตถุmyClassObjectประเภทMyClassที่ตัวเองใช้MyEnumอยู่ สิ่งนี้นำไปสู่ปัญหาเดียวกันที่อธิบายไว้ข้างต้น แก้ไขได้โดยทำ:

export enum MyEnum {
    Option1,
    Option2,
    Option3
}
export class MyClass {
    myEnum: typeof MyEnum;
    myEnumField: MyEnum;
    someOtherField: string;
}

จากนั้นใช้สิ่งนี้ในเทมเพลตเป็น

<div [ngSwitch]="myClassObject.myEnumField">
  <div *ngSwitchCase="myClassObject.myEnum.Option1">
    Do something for Option1
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option2">
    Do something for Option2
  </div>
  <div *ngSwitchCase="myClassObject.myEnum.Option3">
    Do something for Opiton3
  </div>
</div>

หากใช้วิธีการอ้างอิงที่พิมพ์ได้ (จาก @Carl G) และคุณกำลังใช้ตารางประเภทหลายประเภทคุณอาจต้องพิจารณาด้วยวิธีนี้:

export default class AppComponent {

  // Store a reference to the enums (must be public for --AOT to work)
  public TT = { 
       CellType: CellType, 
       CatType: CatType, 
       DogType: DogType 
  };

  ...

  dog = DogType.GoldenRetriever; 

จากนั้นเข้าถึงไฟล์ html ของคุณด้วย

{{ TT.DogType[dog] }}   => "GoldenRetriever"

ฉันชอบวิธีนี้เพราะเห็นได้ชัดว่าคุณอ้างถึง typetable และหลีกเลี่ยงมลภาวะที่ไม่จำเป็นของไฟล์ส่วนประกอบของคุณ

นอกจากนี้คุณยังสามารถใส่ทั่วโลกTTและเพิ่มจำนวนได้ตามต้องการ (ถ้าคุณต้องการสิ่งนี้คุณก็สามารถให้บริการตามที่แสดงโดย @VincentSels answer) หากคุณมีงานพิมพ์มากมายหลายอย่างสิ่งนี้อาจยุ่งยาก

นอกจากนี้คุณมักจะเปลี่ยนชื่อพวกเขาในการประกาศของคุณเพื่อให้ได้ชื่อที่สั้นลง