Angular - כיצד להשתמש בערך של enum ב-TypeScript בהצהרת ngSwitch של Angular2

נראה שה-Typescript enum מתאים באופן טבעי להנחיה ngSwitch של Angular2. אבל כשאני מנסה להשתמש ב-enum בתבנית של הקומפוננטה שלי, אני מקבל "Cannot read property 'xxx' of undefined in ...". איך אני יכול להשתמש בערכי enum בתבנית הקומפוננטה שלי?

שימו לב שזה שונה מאיך ליצור אפשרויות בחירה ב-HTML על בסיס כל הערכים של enum (ngFor). השאלה הזו עוסקת ב-ngSwitch על בסיס ערך מסוים של enum. אף על פי שהשיטה הדומה של יצירת הפניה פנימית למחלקה ל-enum מופיעה.

תשובה #1

אתה יכול ליצור הפניה לאנומ בישראל הרכיב שלך (רק שיניתי את התו ההתחלתי לאות קטנה) ואז להשתמש בהפניה הזו מהתבנית (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;
  }
}

תשובה #2

זה פשוט ועובד כמו קסם :) רק הכריזו על האנומ שלכם כך ואתם יכולים להשתמש בו בתבנית HTML

statusEnum: typeof StatusEnum = StatusEnum;

תשובה #3

אתה יכול ליצור דקורטור מותאם אישית להוספה לרכיב שלך כדי להפוך אותו למודע למנייני ערכים.

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

תשובה #4

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>

תשובה #5

נכון ל-rc.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;
}

תשובה #6

כחלופה לדקורטור של @Eric Lease, שלצערי לא עובד בשימוש ב---aot (וכך גם ב---prod), פניתי לשימוש בשירות שמציג את כל המניינים של האפליקציה שלי. צריך רק להזריק אותו באופן ציבורי לכל קומפוננטה שדורשת זאת, תחת שם נוח, ולאחר מכן ניתן לגשת למניינים בתצוגות שלך. לדוגמה:

שירות

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>