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

Posted 2023-03-05

【中文标题】Angular和localStorage如何获得一个唯一的密钥

【英文标题】：Angular and localStorage how to get an unique key per

【发布时间】：2021-11-08 18:40:55

【问题描述】：

我有几个具有特定过滤器的可重用组件。 我希望将这些过滤器保存到本地存储。但是，由于这些组件是可重用的，我需要为每个组件设置某种唯一的 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

【参考方案1】：

您可以使用组件的构造函数名称来唯一标识组件：

this.constructor.name 

并且可以使用它制作唯一的密钥。

【讨论】：

缩小不会破坏这个？只是检查

这似乎给出了组件的名称，但似乎它会为同一组件的实例提供相同的名称

【参考方案2】：

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

this.constructor['ɵcmp'].id

【讨论】：

在 Angular ^11.2.6" 这给我“未定义”ngOnInit(): void console.log(this.constructor['ɵcmp']);