如何在Angular 12中生成GUID

2023-10-02 03:34| 来源: 网络整理| 查看: 265

在这篇博文中，我们将学习如何在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。 Angular Typescript UUID generation Generate UUID {{uuidValue}}

输出是 Angular typescript UUID example

总结

我们学会了在angular应用程序中生成uuid或guid

【本文地址】

公司简介

联系我们