Angular 角度-监视指令内的本地存储值

我有一个具有此功能的服务

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();
    }
}
}

import{Directive，Input，TemplateRef，ViewContainerRef}来自“@angular/core”；
从“./services/site.service”导入{SiteService}；
@指令（{选择器：'[hasPermissions]'}）
导出类HasPermissionsDirective{
@输入（“hasPermissions”）条件：字符串[]；
构造函数（私有templateRef:templateRef，
私有viewContainer:ViewContainerRef，
专用站点服务：站点服务
) {
}
恩戈尼尼特（）{
设BreakException={}；
让结果：布尔值=真；
让currentUserPermissions=this.siteService.getCurrentUserPermissions（）；
试一试{
this.conditions.forEach（函数（keyCondition）{
if（currentUserPermissions[keyCondition]！==true）{
结果=假；
抛出异常；
}
});
}捕获（e）{
如果（e！==BreakException）抛出e；
}
如果（结果）{
this.viewContainer.createEmbeddedView（this.templateRef）；
}否则{
this.viewContainer.clear（）；
}
}
}

如何查看this.siteService.getCurrentUserPermissions（）的更改？因为现在我必须刷新页面以重新运行指令，如果我更改权限使其简短：

你不能看本地存储

然而，你可以做一些事情：

• 使用附加的角度服务层访问本地存储
• 挂接到

  localStorage.setItem（）

我认为第一个选项是最优雅的，如果你有控制整个应用程序代码。如果您需要的信息是由其他代码设置的，请使用选项2。e、 g:

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)

const set$=new Subject（）；
const\u setItem=localStorage.setItem；
localStorage.setItem=函数（…args）{
设置$.next（args）；
_setItem（…args）；
}
/*筛选“currentUserPermissions”上的操作并映射到实际数据*/
const currentUserPermissions$=set$
.filter（（[key，item]）=>key===“currentUserPermissions”）
.map（（[key，item]）=>item）

---

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

的可能重复。看起来这正是你想要做的。非常感谢你。我不知道为什么这会让选票下降。这是一个完全有效的解决方案，可用于与罗伯特·莫斯卡尔评论中的dupe链接不同的情况。