如何在Angular 5视图中通过枚举名称访问枚举值？

当然可以实现！Angular模板默认没法直接访问TypeScript里定义的枚举，不过只需要一个小操作就能把枚举暴露给模板，让你像在TS代码里那样优雅地用枚举名称做判断，再也不用记那些容易搞混的数字值了。

具体步骤如下： #

1. 把枚举挂载到组件实例上
   在你的ConfigNetworkTreeComponent类里，添加一行代码把枚举本身赋值给组件的属性，这样模板就能访问到它：

   export class ConfigNetworkTreeComponent implements OnInit {
     selectedNode: INode;
     selectedNodeTypeEnum: NodeType = null;
     selectedNodeTypeStr: string;
     // 关键：把枚举暴露给模板
     NodeType = NodeType;
   
     setNodeEvents() {
       let selectedObj = that.getSelectedNode(nodeID);
       that.selectedNode = selectedObj['selectedNode'];
       that.selectedNodeTypeStr = selectedObj['nodeType'];
       that.selectedNodeTypeEnum = NodeType[that.selectedNodeTypeStr];
     }
     ...
   }
   

   原理很简单：Angular模板只能访问组件实例上的属性和方法，所以把NodeType枚举挂载到组件上后，模板就能通过NodeType.HostService这种方式引用枚举成员了。

2. 修改模板中的判断条件
   现在你可以把模板里硬编码的数字换成枚举名称了，代码可读性瞬间提升：

   <div class="modal-body">
    <config-edit-storage-node *ngIf="selectedNode && selectedNodeTypeEnum === NodeType.HostStorage"
                              [node]="selectedNode"
                              [nodeType]="selectedNodeTypeEnum"
                              (cancelEdit)="cancelEdit()"
                              (saveEdit)="onSaveEdit($event)">
    </config-edit-storage-node>
    <config-edit-service-node *ngIf="selectedNode && selectedNodeTypeEnum === NodeType.HostService"
                              [node]="selectedNode"
                              [nodeType]="selectedNodeTypeEnum"
                              (cancelEdit)="cancelEdit()"
                              (saveEdit)="onSaveEdit($event)">
    </config-edit-service-node>
   </div>
   

额外提示 #

如果这个枚举需要在多个组件中使用，你可以考虑把它封装到一个共享服务里，或者创建一个自定义管道来处理枚举值的比较，不过对于单个组件的场景，直接把枚举挂载到组件上是最简洁高效的方案。

内容的提问来源于stack exchange，提问作者bob.mazzo