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。

然而，可以做的事情：

使用其他角度服务图层访问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可以多次抛出。

Angular - 在指令中查看localStorage值

1 个答案: