typescript 如何以角度 6 生成 UUID

How to generate UUID in angular 6

提问by XYZ

I will try to add some packages related to UUID, i.e, https://www.npmjs.com/package/uuid-generator-tsand https://www.npmjs.com/package/@types/uuid. But I am getting an error, if i install these packages, tell me how generate UUID in angular 6.

我将尝试添加一些与 UUID 相关的包，即https://www.npmjs.com/package/uuid-generator-ts和https://www.npmjs.com/package/@types/uuid。但是我收到一个错误，如果我安装这些包，请告诉我如何在 angular 6 中生成 UUID。

回答by Xinan

Nothing to do with Angular itself, you can get uuid from one of the popular npm package such as this:

与 Angular 本身无关，您可以从流行的 npm 包之一获取 uuid，例如：

https://www.npmjs.com/package/uuid

https://www.npmjs.com/package/uuid

The code looks like this:

代码如下所示：

import * as uuid from 'uuid';

const myId = uuid.v4();

回答by MrGrigri

I know that this might help some users out there. This is what I have done in the past. I have created an Angular ID Servicethat keeps track of all of the ids that I have generated throughout the project. Each time an id is generated, it is checked against all of the other ids to ensure that it is unique. There are one public property and two public methods.

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

Remember

记住

You must generate a new id in the ngOnInitmethod and remove that id in the ngOnDestroymethod. If you fail to remove the id when the component is destroyed, they the ids array will get very large.

您必须在ngOnInit方法中生成一个新 id 并在方法中删除该 id ngOnDestroy。如果在组件销毁时未能删除 id，则 ids 数组将变得非常大。

Code

代码

ids: string[]: This is a list of all unique ids stored in the service to ensure uniqueness.

ids: string[]：这是服务中存储的所有唯一 id 的列表，以确保唯一性。

generate(): string: This method will generate and return a unique id as a string; Output: E.g. bec331aa-1566-1f59-1bf1-0a709be9a710

generate(): string: 该方法会生成并返回一个唯一的 id 作为字符串；输出：例如bec331aa-1566-1f59-1bf1-0a709be9a710

remove(id: string): void: This method will remove a given id from the stored ids' array.

remove(id: string): void：此方法将从存储的 ids 数组中删除给定的 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);
  }
}

回答by Ron Jonk

With the example of @MrGrigri: If you don't want to compare and keep the random numbers in an array you could do something like this and you don't need a full npm package and have control about how many groups of 4 you want

以@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('-');
}