Angular select多实例独立存值localStorage 刷新保留各自选中值

• 所有复用的select实例在初始化时统一读取了同一个全局存储键latestSelect的值，没有和自身对应的独立存储键做映射，刷新后自然全部回显同一份全局值
• 现有saveData的列区分逻辑完全失效：模板里的select元素没有设置beer-left/beer-right这类自定义id，所有判断分支最终都会走到else，统一往center-column键里写值，根本没有实现独立存储
• 存储触发时机不合理：把存储逻辑绑在select的click事件上，此时ngModel的值还未完成更新，会出现存储值滞后的问题

1. 父组件为每个select实例传入唯一标识 #

修改app.component.html，给每个复用的app-select传入专属的存储键参数，不再依赖DOM事件判断位置：

<div class="columns">
  <div class="column">
    <app-select storageKey="left-column"></app-select>
  </div>
  <div class="column">
    <app-select storageKey="center-column"></app-select>
  </div>
  <div class="column">
    <app-select storageKey="right-column"></app-select>
  </div>
</div>

2. 组件内接收标识并修正初始化读取逻辑 #

在select.component.ts中通过@Input接收传入的存储键，替换原写死读取全局值的逻辑：

// 引入Input装饰器
import { Input } from '@angular/core';

// 组件类内部定义输入属性
@Input() storageKey: string = 'default-column';

ngOnInit(): void {
    this.brewers$ = this.beersService.createBrewers().pipe(
      map((res : any) => [...new Set(res)].sort())
    );
    // 替换原统一读取latestSelect的逻辑，读取当前组件专属键对应的值
    const savedSelected = localStorage.getItem(this.storageKey);
    this.selectedOption = savedSelected ? savedSelected : '';
    this.selectOption();
}

3. 修正存储触发时机和逻辑 #

删除原来失效的saveData方法，把存储操作放到值真正变更的selectOption方法里，同步写入当前组件对应的专属存储键：

selectOption() {
    this.beers$ = this.beersService.getBeers().pipe(
      map((res : any) => res.filter(beer => beer.brewer === this.selectedOption))
    );
    this.amountBeers = this.nextBeers;
    // 替换原注释掉的全局存储逻辑，写入当前组件专属键
    localStorage.setItem(this.storageKey, this.selectedOption);
}

4. 清理模板冗余绑定 #

移除select上失效的click事件绑定，把写死的name属性改为动态绑定，避免同表单下多实例的ngModel联动冲突：

<select 
    [name]="storageKey"
    [(ngModel)]="selectedOption" 
    (ngModelChange)="selectOption()"
>
    <option selected>Choose your profile</option>
    <option *ngFor="let brewer of brewers$ | async" value="{{brewer}}" >{{ brewer }}</option>
</select>

实现过程中需要注意两点：

• 存储操作绑定在值变更的时机比绑在click事件更可靠，click触发时ngModel的值还未完成同步，容易存入上一次的旧值
• 复用组件的身份标识通过父组件Input传入，而非依赖DOM结构的id判断，属于组件解耦的基本要求，不会因为后续DOM层级调整出现逻辑失效

内容的提问来源于stack exchange，提问作者Paweł Gucio