Comment utiliser un tapuscrit valeur d'enum dans un Angular2 ngSwitch déclaration

Vous pouvez créer une référence à l'enum dans votre classe de composant (j'ai juste changé le caractère initial pour être en minuscules) puis utilisez-référence du modèle (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;
  }
}

Angular4 - Utilisation d'Enum dans le Modèle HTML ngSwitch /ngSwitchCase

Solution ici: https://stackoverflow.com/a/42464835/802196

de crédit: @snorkpete

Dans votre composant, vous avez

enum MyEnum{
  First,
  Second
}

Ensuite dans votre composant, vous apportez dans le type Enum par l'intermédiaire d'un membre "MyEnum', et de créer un autre membre de votre enum variable 'myEnumVar' :

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

Vous pouvez maintenant utiliser myEnumVar et MyEnum dans votre .modèle html. Par exemple, en Utilisant les 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>

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

Commencer par considérer son " Dois-je vraiment voulez faire cela?'

Je n'ai pas de problème en se référant à des enums directement dans le HTML, mais dans certains cas, il existe des options plus écologiques qui ne perdent pas de type-safe-ness.
Par exemple, si vous choisissez l'approche présentée dans mon autre réponse, vous pouvez avoir déclaré TT dans votre composant quelque chose comme ceci:

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

De montrer une mise en page différente dans votre code HTML, vous auriez un *ngIf pour chaque type de mise en page, et vous pourriez vous référer directement à la enum dans votre composant HTML:

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

Cet exemple utilise un service de la mise en page actuelle, l'exécute par le biais de la async pipe et puis la compare à notre valeur d'enum. C'est assez verbeux, compliqué et pas beaucoup de plaisir à regarder. Il expose également le nom de l'enum, qui lui-même peut-être trop verbeux.

Alternative, qui conserve le type de sécurité de l'HTML

Alternativement, vous pouvez effectuer les opérations suivantes, et déclarer un plus lisible en fonction de votre composant .ts fichier :

*ngIf="isResponsiveLayout('Horizontal')"

Beaucoup plus propre! Mais que faire si quelqu'un tape dans 'Horziontal' par erreur? La raison pour laquelle vous voulez utiliser un enum dans le code HTML de a à typesafe droit?

Nous pouvons encore obtenir qu'avec keyof et certains tapuscrit de la magie. C'est la définition de la fonction:

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

Remarque l'utilisation de FeatureBoxResponsiveLayout[string] qui convertit la chaîne de valeur transmise à la valeur numérique de l'enum.

Cela donnera un message d'erreur avec un AOT compilation si vous utilisez une valeur non valide.

Argument de type '"H4orizontal" " n'est pas assignable à paramètre de type '"Verticale" | "Horizontale"

Actuellement VSCode n'est pas assez intelligent pour souligner H4orizontal dans l'éditeur HTML, mais vous obtiendrez de l'avertissement au moment de la compilation (avec --prod construire ou --aot switch). Cela peut également être amélioré dans une future mise à jour.

Mon composant utilisé un objet myClassObject de type MyClass, qui était lui-même à l'aide de MyEnum. Cela a conduit à le même problème décrit ci-dessus. Résolu en faisant:

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

et d'utiliser ensuite ce dans le modèle comme

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