在我们之前的文章中，我们实现了基于短期令牌的用户电子邮件验证。在这种情况下，令牌可以具有不同的状态，如有效、无效、过期等，并且基于此状态，我们必须呈现视图页面。因此，我们在这个用例中使用了 Enum 来保存不同类型的状态。现在让我们深入了解如何创建 TypeScript Enum 并在 Angular 组件中使用它。

什么是枚举？

Enums 是 TypeScript 为数不多的不是 JavaScript 类型级扩展的特性之一。枚举允许开发人员定义一组命名常量。使用枚举可以更轻松地记录意图，或创建一组不同的案例。 TypeScript 提供数字和基于字符串的枚举。

创建一个枚举

我们可以在单独的文件中或在类外的同一个组件文件中创建枚举。在我们的示例中，我们在同一个 token.component.ts 文件中创建了枚举，如下所示：

export enum TokenStatus {
	  VALID,
	  INVALID,
	  EXPIRED,
	  SENDING,
	  SENT
	}

在 Angular 组件中使用枚举

创建枚举后，我们需要在要使用此枚举的组件中创建一个字段并将其分配给该字段：

tokenStatus = TokenStatus;

然后，创建一个 TokenStatus 类型的新字段来保存令牌的当前状态：

status : TokenStatus;

然后，为状态字段赋值，

this.status = TokenStatus.VALID;

然后，在组件 HTML 文件中，

<div class="form-group" *ngIf="status == tokenStatus.VALID">
		<div class="alert alert-success" role="alert">Email verified successfully. Please login.</div>
</div>
<div class="form-group" *ngIf="status == tokenStatus.EXPIRED">
	<div class="alert alert-danger" role="alert">Link Expired!</div>
	<button class="btn btn-primary btn-block" (click)="resendToken()">Re-send Verification Email</button>
</div>

在 TypeScript 中将字符串转换为枚举

在我们的应用程序中，我们正在验证后端 REST API 中的令牌并在响应中获取验证结果。这个结果将是 VALID/INVALID/EXPIRED。因此，我们没有手动检查 JSON 响应中返回的字符串结果，而是借助 keyof 和 typeof 运算符直接将字符串值分配给状态字段。现在让我们了解这些运算符是什么。

在 Typescript 中，枚举在编译时用作类型以实现常量的类型安全，但它们在运行时被视为对象。这是因为一旦 Typescript 代码被编译为 Javascript，它们就会被转换为普通对象。因此，为了通过字符串键动态访问枚举，我们需要使用 keyof 和 typeof 运算符的组合。

[[$16$]] 操作符接受一个对象类型并返回一个接受任何对象键的类型。它将返回字符串文字的联合，每个都是给定对象中的键。

typeof 类型运算符可用于 type 上下文以引用变量或属性的 type。

this.status = TokenStatus[data.message as keyof typeof TokenStatus];

这里，typeof 将返回类型 {VALID:string, INVALID:string, EXPIRED:string, SENDING:string, SENT:string}，而 keyof 将返回由 $24$。

**注意：**虽然 Enums 在运行时被视为对象，但当我只尝试使用 keyof 运算符时，它运行良好。我找不到这种行为的答案。如果你知道，请在评论部分留下它。

this.status = TokenStatus[data.message as keyof TokenStatus];

Token Angular 组件代码

这是令牌组件的完整工作代码。

token.component.ts

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../_services/auth.service';
import { Router, ActivatedRoute } from '@angular/router';

export enum TokenStatus {
	  VALID,
	  INVALID,
	  EXPIRED,
	  SENDING,
	  SENT
	}


@Component({
selector: 'app-token',
templateUrl: './token.component.html',
styleUrls: ['./register.component.css']
})
export class TokenComponent implements OnInit {

	token = '';
	tokenStatus = TokenStatus;
	status : TokenStatus;
	errorMessage = '';

	constructor(private authService: AuthService, private route: ActivatedRoute) {

	}

	ngOnInit(): void {
		this.token = this.route.snapshot.queryParamMap.get('token');
		if(this.token){
			this.authService.verifyToken(this.token).subscribe(
			data => {
				this.status = TokenStatus[data.message as keyof TokenStatus];
			}
			,
			err => {
				this.errorMessage = err.error.message;
			}
			);
		}	
	}

	resendToken(): void {
		this.status = TokenStatus.SENDING;
		this.authService.resendToken(this.token).subscribe(
		data => {
			this.status = TokenStatus.SENT;
		}
		,
		err => {
			this.errorMessage = err.error.message;
		}
		);
	}
}

您可以查看令牌验证组件部分以了解如何从组件 HTML 模板访问枚举。

源代码

https://github.com/JavaChinna/angular-spring-boot-email-integration

结论

这就是所有的人。在本文中，我们探索了如何在 angular 组件中使用 enums 以及如何将字符串从 JSON 转换为 enum。