onInit 后更新禁用属性

Question

我正在为需要实施权限的工作开发 angular 应用程序。权限当前在后端存储为 1 或 0，前端调用服务以 return 用户的权限，如果用户没有权限执行某个操作，则执行该操作的按钮被禁用。我们考虑了一会儿，决定最好的选择是在启动时保存对会话存储的权限，并在需要检查时从那里获取它。

这在应用程序启动后非常有效，每个页面都成功读取权限并禁用了相应的按钮，但是我在应用程序的初始启动时遇到了问题。权限必须通过异步方法接收，因此应用程序会在接收权限的同时继续启动。由于默认是没有权限的，所以第一页有一个按钮即使在收到权限后也是禁用的，因为它是在调用异步方法之前创建的。刷新后它按预期工作。

我一直在尝试寻找一种方法来检测何时对会话存储进行更改并相应地更新初始组件，或者让应用程序等待该方法获得权限，然后再继续启动。任何帮助将不胜感激。

-谢谢

Answer 1

嗨，我准备了一个假人 process-diagram： https://lucid.app/lucidchart/758acc33-e7b9-41b0-b106-27fcfb6604eb/edit?invitationId=inv_01cefa4e-73cc-4ef0-88d9-7187f0ac1559#

你有一些选择来实现类似的东西。

HttpInterceptors + UI-Spinner 在所有后端请求期间。教程： https://indepth.dev/tutorials/angular/how-to-implement-global-loaders-using-http-interceptors
自定义解决方案，仅涵盖这种情况（没有 HttpInterceptor）
使用解析器

Answer 2

试试这个，对我有用

创建名为 BroadCasterService 的服务 -

import { Injectable } from '@angular/core';
import { Subject, Observable, BehaviorSubject } from 'rxjs';
import { filter, map } from 'rxjs/operators';

export class BroadcasterModel {
key: string=''
data: any;
}
@Injectable({
providedIn: 'root'
})
export class BroadCasterService {
public title = new BehaviorSubject('');
private subject = new Subject<BroadcasterModel>();
public sideNavToggleSubject: BehaviorSubject<any> = new 
BehaviorSubject(null);
broadcast(key:string, data:any) {
    this.subject.next({ key: key, data: data });
}
on(key:string): Observable<any> {
    return this.subject.pipe(filter(m => m.key == key), map(m => 
m.data));
}
setTitle(title: string) {
    this.title.next(title);
}
public toggle(data:any) {
    return this.sideNavToggleSubject.next(data);
  } 
}

然后在您设置会话数据的组件中导入此服务 -

import { BroadCasterService } from '../services/broad-caster.service';

在构造函数中添加服务 -

 constructor(private broadcastService: BroadCasterService)

然后连同会话数据一起设置广播中的权限数据 -

this.sharedService.getPermission('').subscribe((res: any) => {
  this.storage.setLocalStorageData('permissionData', res?.data, true);
  this.broadcastService.broadcast("permissionData", res?.data);
});

调用你设置权限的广播服务-

let modules :any;
 modules = localStorage.getItem("permissionData");
 this.broadcastService.on('permissionData').subscribe(cic => {
        modules = cic; //this keeps the data until the page is refresh
 });

刷新页面后，您会从会话存储中获取权限数据。

希望对你有所帮助

onInit 后更新禁用属性

Update disabled property after onInit

typescript

angular

onInit 后更新禁用 属性

Update disabled property after onInit

typescript

angular

onInit 后更新禁用属性