angular - 如何在 Angular 5 View 中访问枚举值

Question

我目前在我的 html View 中直接引用 enum int 值，但我更愿意通过枚举名称引用 - 例如，就像我在 TypeScript 中所做的那样代码

 if (this.nodeType === NodeType.HostService) {
      ...
 }

我有一个枚举定义为:

export enum NodeType {
    Location,
    Host,
    HostAccessPoint,
    HostStorage,
    HostService
}

在我的 html View 中，我在模态中加载特定组件(包括响应式表单)，如下所示 - 这完全取决于 enum 值:

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

在我的组件中，我正在设置 that.selectedNodeTypeEnum :

export class ConfigNetworkTreeComponent implements OnInit {

  selectedNode: INode;
  selectedNodeTypeEnum: NodeType = null;
  selectedNodeTypeStr: string;
  
  setNodeEvents() {
   let selectedObj = that.getSelectedNode(nodeID);        
   that.selectedNode = selectedObj['selectedNode'];						
   that.selectedNodeTypeStr = selectedObj['nodeType'];
   that.selectedNodeTypeEnum = NodeType[that.selectedNodeTypeStr];
  
  }
  ...
}

底线是我宁愿在 html 中使用这种编码风格:

*ngIf="selectedNode && selectedNodeTypeEnum===NodeType.HostService"

与引用枚举 int 值本身相反。

可以吗？

感谢和问候。

Answer 1

自 expression context模板的 是组件实例，您应该将 NodeType 枚举分配给组件类的属性以使其在模板中可用:

export class ConfigNetworkTreeComponent {
  public NodeTypeEnum = NodeType;  // Note: use the = operator
  ...
}

然后您可以在模板中使用该属性来引用 NodeType 值:

*ngIf="selectedNode && selectedNodeType === NodeTypeEnum.HostService"

参见 this stackblitz用于演示。