Angular - 观察指令内的 localStorage 值

Question

我有一个有这个功能的服务

getCurrentUserPermissions() {
    return JSON.parse(localStorage.getItem('currentUserPermissions'));
}

现在我创建一个指令来显示和隐藏菜单

*hasPermissions="['stations','users']"

指令

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
import {SiteService} from "../services/site.service";

@Directive({selector: '[hasPermissions]'})
export class HasPermissionsDirective {

@Input("hasPermissions") conditions: string[];

constructor(private templateRef: TemplateRef<any>,
            private viewContainer: ViewContainerRef,
            private siteService: SiteService
) {
}

ngOnInit() {
    let BreakException = {};
    let result: boolean = true;
    let currentUserPermissions = this.siteService.getCurrentUserPermissions();

    try {
        this.conditions.forEach(function (keyCondition) {
            if (currentUserPermissions[keyCondition] !== true) {
                result = false;
                throw BreakException;
            }
        });
    } catch (e) {
        if (e !== BreakException) throw e;
    }

    if (result) {
        this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
        this.viewContainer.clear();
    }
}
}

如何查看 this.siteService.getCurrentUserPermissions() 的变化？因为现在我必须刷新页面才能重新渲染指令才能工作，如果我更改权限

Answer 1

简而言之：

您无法观看 localStorage。

还有一些你可以做的事情：

• 使用额外的 Angular 服务层访问 localStorage
• 钩入localStorage.setItem()

如果您可以控制整个应用程序代码，我认为第一个选项最优雅。如果您需要的信息是由其他代码设置的，请使用选项 2。例如：

const set$ = new Subject<any[]>();
const _setItem = localStorage.setItem;
localStorage.setItem = function(...args){
  set$.next(args);
  _setItem(...args);
}

/* filter for actions on 'currentUserPermissions' and map to the actual data */ 
const currentUserPermissions$ = set$
  .filter(([key, item]) => key === 'currentUserPermissions')
  .map(([key, item]) => item)

这将 localStorage.setItem 替换为一个新函数，该函数将函数参数推送到 Subject，然后使用数据调用实际的 localStorage.setItem。这是一个非常幼稚的实现，您可能需要进行一些错误检查，因为 setItem 可能会多次抛出异常。