TypeScript 2+中从HTML传递枚举丢失值的解决方法

你遇到的核心问题是模板无法直接访问组件导入的枚举类型，所以你在模板里写的'Side.All'只是一个普通字符串，而不是枚举对应的数值（比如Side.All实际是0），这直接导致后续的数值比较全部失效。

下面是两种既能解决问题又能保持代码可读性的方案：

方案1：将枚举暴露给模板（最推荐） #

在你的TabsComponent类中，把Side枚举赋值给一个同名属性，这样模板就能直接引用枚举的成员，代码可读性拉满：

修改后的组件代码 #

import { Component, OnInit } from '@angular/core';
import { Character, Side } from '../core';

@Component({
  selector: 'app-tabs',
  templateUrl: './tabs.component.html'
})
export class TabsComponent {
  // 把枚举暴露给模板，让模板能直接识别Side.All这类枚举成员
  Side = Side; 
  chosenList = Side.All; // 初始值保持为枚举数值0
  characters = [
    { name: 'Luke Skywalker', side: Side.All },
    { name: 'Darth Vader', side: Side.All }
  ];

  onChoose(side: Side): void {
    this.chosenList = side; // 现在接收的是枚举数值，不是字符串
  }

  getCharacters(): Character[] {
    if (this.chosenList === Side.All) {
      return this.characters.slice();
    }
    return this.characters.filter((character) => {
      return character.side === this.chosenList;
    });
  }

  onSideChosen(charInfo: Character): void {
    const pos = this.characters.findIndex((char) => {
      return char.name === charInfo.name;
    });
    this.characters[pos].side = charInfo.side;
  }
}

修改后的HTML模板 #

<div id="tab-main" class="container">
  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a [ngClass]="{active: chosenList === Side.All}" class="nav-link" (click)="onChoose(Side.All)" style="cursor: pointer">All</a>
    </li>
    <li class="nav-item">
      <a [ngClass]="{active: chosenList === Side.Light}" class="nav-link" (click)="onChoose(Side.Light)" style="cursor: pointer">Light</a>
    </li>
    <li class="nav-item">
      <a [ngClass]="{active: chosenList === Side.Dark}" class="nav-link" (click)="onChoose(Side.Dark)" style="cursor: pointer">Dark</a>
    </li>
  </ul>
  <app-list [characters]="getCharacters()" (sideAssigned)="onSideChosen($event)"></app-list>
</div>

修改后，模板里的Side.All会直接映射到枚举的数值，onChoose方法接收的是正确的枚举类型值，chosenList和Side.All的比较也能正常工作，完全保留了代码的可读性。

方案2：直接传递枚举数值（适合不想暴露整个枚举的场景） #

如果你不想把整个枚举暴露给模板，可以直接传递枚举对应的数值，但这种方法可读性稍弱——其他人看模板时需要对应枚举的数值含义：

HTML模板修改示例 #

<li class="nav-item">
  <a [ngClass]="{active: chosenList === 0}" class="nav-link" (click)="onChoose(0)" style="cursor: pointer">All</a>
</li>
<li class="nav-item">
  <a [ngClass]="{active: chosenList === 1}" class="nav-link" (click)="onChoose(1)" style="cursor: pointer">Light</a>
</li>
<li class="nav-item">
  <a [ngClass]="{active: chosenList === 2}" class="nav-link" (click)="onChoose(2)" style="cursor: pointer">Dark</a>
</li>

这种方法能解决问题，但代码的可维护性不如第一种方案，所以更推荐使用方案1。

内容的提问来源于stack exchange，提问作者Martin Čuka