typescript 如何在Angular中生成UUID

ohfgkhjo  于 2023-06-24  发布在  TypeScript
关注(0)|答案(5)|浏览(209)

Angular如何生成UUID?

我尝试了https://www.npmjs.com/package/uuid-generator-tshttps://www.npmjs.com/package/@types/uuid。但我得到一个错误,如果我安装这些软件包,

f45qwnt8

f45qwnt81#

与Angular本身无关,您可以从流行的npm包中获取uuid,例如:
https://www.npmjs.com/package/uuid
代码看起来像这样:

import * as uuid from 'uuid';

const myId = uuid.v4();

但是uuid没有定义uuid类(类型);它只提供了生成和解析UUID为string的实用程序,以及在string和字节数组表示之间进行转换的实用程序。因此,您将无法使用类型系统来确保值是有效的UUID。

6rqinv9w

6rqinv9w2#

以@MrGrigri为例:如果你不想比较随机数并将其保存在数组中,你可以这样做,你不需要一个完整的npm包,也不需要控制你想要多少组4个

/**
 * generate groups of 4 random characters
 * @example getUniqueId(1) : 607f
 * @example getUniqueId(2) : 95ca-361a-f8a1-1e73
 */
export function getUniqueId(parts: number): string {
  const stringArr = [];
  for(let i = 0; i< parts; i++){
    // tslint:disable-next-line:no-bitwise
    const S4 = (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    stringArr.push(S4);
  }
  return stringArr.join('-');
}
whhtz7ly

whhtz7ly3#

我知道这可能会帮助一些用户。这就是我过去所做的。我创建了一个Angular ID Service,它跟踪了我在整个项目中生成的所有id。每次生成一个id时,都会对照所有其他id进行检查,以确保它是唯一的。有一个公共属性和两个公共方法。

记住

必须在ngOnInit方法中生成一个新的id,并在ngOnDestroy方法中删除该id。如果在组件被销毁时没有删除id,则id数组将变得非常大。

代码

ids: string[]:这是存储在服务中的所有唯一id的列表,以确保唯一性。
generate(): string:此方法将生成并返回一个唯一的id作为字符串;输出:例如bec331aa-1566-1f59-1bf1-0a709be9a710
remove(id: string): void:这个方法会从存储的id数组中删除给定的id。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class IdService {
  public ids: string[] = [];

  constructor() {}

  public generate(): string {
    let isUnique = false;
    let tempId = '';

    while (!isUnique) {
      tempId = this.generator();
      if (!this.idExists(tempId)) {
        isUnique = true;
        this.ids.push(tempId);
      }
    }

    return tempId;
  }

  public remove(id: string): void {
    const index = this.ids.indexOf(id);
    this.ids.splice(index, 1);
  }

  private generator(): string {
    const isString = `${this.S4()}${this.S4()}-${this.S4()}-${this.S4()}-${this.S4()}-${this.S4()}${this.S4()}${this.S4()}`;

    return isString;
  }

  private idExists(id: string): boolean {
    return this.ids.includes(id);
  }

  private S4(): string {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }
}
sauutmhj

sauutmhj4#

如果您不需要服务器端渲染(SSR),您可以使用现在每个浏览器都支持的crypto.randomUUID()方法。

const id = crypto.randomUUID();
w51jfk4q

w51jfk4q5#

一个有用的技巧:

const id = Date.now().toString();

相关问题