如何利用Angular指令读取LocalStorage值并复用为组件筛选条件？

你的现有思路没问题，但需要优化指令的语义和绑定逻辑，下面分两种方案实现需求：

方案一：基础版（指令传递值到组件） #

先修改指令，把事件名从keydown改成更贴合场景的storageValueLoaded，避免和原生键盘事件冲突：

import { Directive, OnInit, Input, Output, EventEmitter } from '@angular/core';

@Directive({ selector: '[localStorageBinding]' })
export class KeyCatcherDirective implements OnInit{
  @Input('localStorageBinding') storageKey: string;
  @Output() storageValueLoaded = new EventEmitter<string | null>();
  
  ngOnInit(): void {
    this.loadStoredValue();
  }

  private loadStoredValue() {
    const value = localStorage.getItem(this.storageKey);
    this.storageValueLoaded.emit(value);
  }
}

然后在组件里接收值，绑定到下拉框的ngModel：

组件模板 #

<!-- 用指令读取LocalStorage值 -->
<div [localStorageBinding]="'something'" (storageValueLoaded)="setSelectedFilter($event)"></div>

<!-- 带ngModel的下拉选择器 -->
<select [(ngModel)]="selectedFilter">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

组件类 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-filter',
  templateUrl: './filter.component.html'
})
export class FilterComponent {
  selectedFilter: string | null = null;

  setSelectedFilter(storedValue: string | null) {
    if (storedValue) {
      this.selectedFilter = storedValue;
    }
    // 要是没有存储值，这里可以设个默认选项
    // else {
    //   this.selectedFilter = 'option1';
    // }
  }
}

方案二：进阶版（指令直接与ngModel双向绑定） #

如果想省掉组件里的中转逻辑，让指令直接和ngModel交互，同时实现读取LocalStorage初始化+值变化时自动更新LocalStorage，可以让指令实现ControlValueAccessor：

import { Directive, OnInit, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Directive({
  selector: '[localStorageBinding][ngModel]',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => KeyCatcherDirective),
      multi: true
    }
  ]
})
export class KeyCatcherDirective implements OnInit, ControlValueAccessor{
  @Input('localStorageBinding') storageKey: string;
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  ngOnInit(): void {
    // 组件初始化时读取LocalStorage，同步到ngModel
    const storedValue = localStorage.getItem(this.storageKey);
    if (storedValue) {
      this.onChange(storedValue);
    }
  }

  // 当ngModel值变化时，同步更新到LocalStorage
  writeValue(value: any): void {
    if (value) {
      localStorage.setItem(this.storageKey, value);
    } else {
      localStorage.removeItem(this.storageKey);
    }
  }

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }
}

这种方式的模板超简洁 #

<select [(ngModel)]="selectedFilter" localStorageBinding="something">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

组件初始化时会自动把LocalStorage里的something值绑定到下拉框，用户选新值时也会自动存回LocalStorage，完全实现筛选条件的持久化。

内容的提问来源于stack exchange，提问作者baconitus