在这篇博文中，我们将学习如何在Angular中生成唯一的ID - GUID, UUID，并举例说明。
Angular Typescript UUID
唯一标识符的生成是任何编程语言的要求。它包含128位，由5个组的连字符分开。
Angular是基于Typescript的mvc框架，GUID和UUID生成了128位的实现。
这篇博文适用于所有Angular版本，包括最新版本
- Angular 2
- Angular 7
- Angular 9
- Angular 10
- Angular 11
- Angular 12
这篇文章已经更新，可用于最新的Angular 11、12和13版本。
我们有很多方法可以生成GUID
我们已经有npm软件包可用
这个例子也适用于ionic 5应用程序。
使用实例
这个例子讲述了以下内容
- 在typecript中生成GUID
- 在angular组件中生成UUID
angular2-uuid npm包
首先使用npm install命令安装angular2-uuid npm包。
npm install angular2-uuid --save
这将安装并在node_modules中创建一个angular2-uuid依赖项，并在package.json的依赖项中添加一个条目。
{
"devDependencies":{
"angular2-uuid":"1.1.1";
}
}
在angular组件中导入UUID模块
一旦angular2-uuid 成功地安装到angular应用程序中，下一步必须将UUID 导入到angular组件中。
app.component.ts
import { Component } from '@angular/core';
import { UUID } from 'angular2-uuid';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
uuidValue:string;
constructor() {
}
generateUUID(){
this.uuidValue=UUID.UUID();
return this.uuidValue;
}
}
生成HTML模板
以下是以下步骤的顺序
- 在html组件中创建按钮
- 在点击按钮时，它会调用angular组件中的函数。
- UUID.UUID()生成唯一标识符app.component.html。
<div style="text-align:center">
<h1>
Angular Typescript UUID generation
</h1>
<button (click)="generateUUID()" >
Generate UUID</button>
<h2>{{uuidValue}}</h2>
</div>
输出是
总结
我们学会了在angular应用程序中生成uuid或guid
