Angular4 -在HTML模板中使用Enum

解决方案:https://stackoverflow.com/a/42464835/802196

信用：@snorkpete

在你的组件中，你有

enum MyEnum{
  First,
  Second
}

然后在你的组件中，你通过成员'MyEnum'引入Enum类型，并为你的枚举变量'myEnumVar'创建另一个成员:

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

你现在可以在你的。html模板中使用myEnumVar和MyEnum。例如，在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>

你可以在你的组件类中创建一个对枚举的引用(我只是将初始字符改为小写)，然后从模板(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;
  }
}

这很简单，而且很有魅力:) 只是像这样声明你的枚举，你可以在HTML模板上使用它

statusEnum: typeof StatusEnum = StatusEnum;

如果使用“typetable reference”方法(来自@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"

我喜欢这种方法，因为它清楚地表明您引用的是一个类型表，而且还避免了对组件文件的不必要污染。

你也可以在某个地方放置一个全局TT，并根据需要添加枚举(如果你想这样做，你也可以像@VincentSels answer所示的那样创建一个服务)。如果你有很多很多的类型，这可能会变得很麻烦。

此外，您总是在声明中重命名它们以获得更短的名称。

Angular4 -在HTML模板中使用Enum

解决方案:https://stackoverflow.com/a/42464835/802196

信用：@snorkpete

在你的组件中，你有

enum MyEnum{
  First,
  Second
}

然后在你的组件中，你通过成员'MyEnum'引入Enum类型，并为你的枚举变量'myEnumVar'创建另一个成员:

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

你现在可以在你的。html模板中使用myEnumVar和MyEnum。例如，在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>

首先考虑“我真的想做这件事吗?”

我在HTML中直接引用枚举没有问题，但在某些情况下，有更干净的替代方案，不会失去类型安全性。 例如，如果你选择在我的其他回答中显示的方法，你可能已经在你的组件中声明了TT，就像这样:

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

要在HTML中显示不同的布局，你需要为每种布局类型使用*ngIf，并且你可以直接引用组件HTML中的枚举:

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

这个例子使用一个服务来获取当前布局，通过async管道运行它，然后将它与我们的enum值进行比较。它相当啰嗦，令人费解，看起来也没什么意思。它还公开枚举的名称，该名称本身可能过于详细。

另一种选择是保留HTML的类型安全性

或者你也可以这样做，并在组件的.ts文件中声明一个更可读的函数:

*ngIf="isResponsiveLayout('Horizontal')"

多干净!但如果有人不小心输入了“水平”呢?在HTML中使用枚举的全部原因是为了类型安全，对吧?

我们仍然可以通过keyof和一些typescript魔法来实现这一点。这是函数的定义:

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

注意使用FeatureBoxResponsiveLayout[string]将传入的字符串值转换为enum的数值。

如果使用了无效值，这将给出带有AOT编译的错误消息。

类型为“h4horizontal”的参数不能赋值给类型为“Vertical”的参数|“Horizontal”

目前VSCode还不够智能，不能在HTML编辑器中下划线h4horizont，但是你会在编译时得到警告(使用——prod build或——aot开关)。这也可能在未来的更新中得到改进。