时间戳

首页 > 解决方案 > 如何为每个组件实例生成一个角度持久的唯一标识符？

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

问题描述

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

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

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

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

这是我目前的采样器

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

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

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

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

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

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

标签： angular

解决方案

如果您想为组件的每个实例创建一个标识符，您可以创建自己的标识符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);
    });
  }

}

推荐阅读