时间戳

首页 > 解决方案 > Angular和localStorage如何获得一个唯一的密钥

angular - Angular和localStorage如何获得一个唯一的密钥

问题描述

我有几个具有某些过滤器的可重用组件。我希望将这些过滤器保存到本地存储。然而，由于这些组件是可重复使用的，我需要为每个组件设置某种唯一的 id，否则每个组件的过滤器键都是相同的。

例如，我有具有 1:m 关系的组织和域（1 个组织，许多域）。然后我有一个域表组件，列出了几个域：（下面的所有示例都是摘录）

@Component({
  selector: 'app-domain-table',
  templateUrl: 'component.html',
  styleUrls: ['component.scss']
})
export class DomainTableComponent implements OnInit {

  // filter:
  @Input()
  organizationId: string;
  
}

然后我在 2 个页面上重新使用这个组件，域页面和组织页面：

<div class="head d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-2 pb-2 mb-3 border-bottom fix-width">
  <div class="head-start">
    <i class="fa fa-users"></i>
    <h1 class="h2">Domains</h1>
  </div>
</div>
<app-domain-table></app-domain-table>

<div class="head d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-2 pb-2 mb-3 border-bottom fix-width">
  <div class="head-start">
    <i class="fa fa-orgs"></i>
    <h1 class="h2">Organizations</h1>
  </div>
</div>

<app-organization-table></app-organization-table>

<app-domain-table></app-domain-table>

不，当我想为特定组织过滤域时，我只需设置它organizationId，组件将处理其余部分。我已将其设置为在页面之间记住此值，如下所示：

  private _organizationId: number = (+localStorage.getItem('DomainTableComponent._organizationId')) ?? 0;

  public get organizationId(): number {
    return this._organizationId;
  }
  public set organizationId(value: number) {
    localStorage.setItem('DomainTableComponent._organizationId', value ? value.toString() : (0).toString());
    this._organizationId = value;
  }

但是，这会导致两个页面的过滤器DomainTableComponent相同。这是因为它们使用相同的密钥：DomainTableComponent._organizationId. 我需要以某种方式唯一地标识组件实例，所以我可以制作一个像这样的键：DomainTableComponent._organizationId.InstaceOnDomainPage.

编辑：这个问题提出了一个很好的解决方案：How to access components unique encapsulation ID in Angular 9

标签： angularlocal-storage

解决方案

如果您使用封装模式（这是默认模式），您可以获得唯一的 id 角度添加到每个元素。让它在组件类中使用它：

this.constructor['ɵcmp'].id

推荐阅读