如何為每個組件實例生成一個有角度的持久唯一標識符？

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);
    });
  }

}