如何为每个组件实例生成一个有角度的持久唯一标识符？

Question

我需要生成一个 id 以便将我的过滤器组件应用的最后一个过滤器保存在数据库中。 问题是过滤器组件在我的应用程序的几个部分都有实例，我需要一种方法来为每个实例生成一个持久的 id 以便保存到数据库。

我尝试使用 nghost 属性，但在每种情况下都相同。

  private getId(): any {
    const id = this.constructor['ɵcmp'].id;
    return id;
  }

我不能依赖随机生成，因为如果用户更改主机或浏览器，生成的 id 可能会更改。 有没有办法做到这一点？

这是我目前的采样器

在我最后一次尝试中，我添加了一个静态数字 var 以获得组件的计数器，然后将此 conter 添加到主机 ID

export class ChildComponent {
  static index = 0;
  unique = this.constructor['ɵcmp'].id + ChildComponent.index;
  constructor() {
    ChildComponent.index ++;
  }
}

这个解决方案没有提供我需要的一切，因为生成 ID 可以根据不同过滤器的执行顺序而变化，这可能导致应用程序的两个不同路由中的两个过滤器获得相同的 ID。

为了防止这种情况，我添加了 Router 服务以获取当前 url：

  constructor(private router: Router) {
    ChildComponent.index ++;
    this.unique = btoa(this.constructor['ɵcmp'].id + ChildComponent.index + this.router.url);
  }

现在我意识到，如果我们直接通过 url 导航，或者如果我们从主页导航，我们会为同一个组件实例获得不同的 id。

Answer 1

如果您想为组件的每个实例创建一个标识符，您可以创建自己的GUID并将其赋予您的变量unique 。 一个工作示例：

export class ChildComponent implements OnInit{
  unique = '';

  ngOnInit() {
    this.unique = this.uuidv4()
  }

  uuidv4() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
      return v.toString(16);
    });
  }

}