angular - 如何为每个组件实例生成 Angular 持久唯一标识符？

Question

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

我试过使用 nghost 属性，但这个属性在每个实例中都是相同的。

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

我不能依赖随机生成，因为如果用户更改主机或浏览器，生成的 ID 可能会更改。有办法实现吗？

这是我现在的 sampler

在我最后一次尝试中，我添加了一个静态数字 var 以获得组件的计数器，然后将此计数器添加到主机 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);
    });
  }

}