我有一个带有 Material sidenav 的应用程序,sidenav 显示带有链接的列表。其中一个链接有一个指令,如果用户权限不符合预期,则隐藏该链接。如果我在 header 组件中使用列表,一切正常,但在我的应用程序组件中,该指令在应用程序重新加载之前不起作用。我该如何解决?
app.component.ts
import { MatSidenav } from "@angular/material";
import { ViewChild, ViewEncapsulation, OnChanges } from "@angular/core";
import { Component, AfterViewInit, HostBinding, OnInit } from "@angular/core";
import {
Router,
NavigationStart,
NavigationEnd,
NavigationCancel
} from "@angular/router";
import { OverlayContainer } from "@angular/cdk/overlay";
import { CustomizeService } from "./services/shared-services/customize.service";
import { FocusMonitor } from "@angular/cdk/a11y";
import { SidenavService } from "./services/layout-services/sidenav.service";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements AfterViewInit, OnInit {
loading;
customTheme;
// theme: string;
@HostBinding("class") componentCssClass;
@ViewChild("sidenav") public sidenav: MatSidenav;
constructor(
private router: Router,
private sidenavService: SidenavService,
private focusMonitor: FocusMonitor,
public overlayContainer: OverlayContainer,
private customizeService: CustomizeService
) {
this.loading = true;
}
ngOnInit() {
this.getTheme();
this.sidenavService.setSidenav(this.sidenav);
}
ngAfterViewInit() {
this.focusMonitor.stopMonitoring(document.getElementById("clienti"));
this.router.events.subscribe(event => {
if (event instanceof NavigationStart) {
this.loading = true;
} else if (
event instanceof NavigationEnd ||
event instanceof NavigationCancel
) {
this.loading = false;
}
});
}
getTheme() {
this.customizeService.getTheme().subscribe(theme => {
this.overlayContainer.getContainerElement().classList.add(theme);
this.componentCssClass = theme || this.getLogoFromLocalStorage();
});
// this.sendTheme(theme);
}
getLogoFromLocalStorage() {
return localStorage.getItem("customStyle");
}
closeSidenav() {
this.sidenavService.close();
}
}
app.component.html
<div color="primary">
<mat-sidenav-container class="example-container" (backdropClick)="closeSidenav()">
<mat-sidenav #sidenav (keydown.escape)="closeSidenav()" disableClose>
<mat-list>
<mat-list-item (click)="closeSidenav()"><button id="clienti" mat-button [routerLink]="['/clienti']"
routerLinkActive="mat-accent">Clienti</button></mat-list-item>
<mat-list-item (click)="closeSidenav()"><button mat-button [routerLink]="['/utenti']" routerLinkActive="mat-accent">Utenti</button></mat-list-item>
<!-- <mat-list-item (click)="closeSidenav()"><butto [routerLink]="['/matricole']" routerLinkActive="mat-accent">Matricole</mat-list-item> -->
<mat-list-item (click)="closeSidenav()"><button mat-button [routerLink]="['/sks']" routerLinkActive="mat-accent">Sks</button></mat-list-item>
<mat-list-item (click)="closeSidenav()" [appCheckPermissions]="9">
<button mat-button [routerLink]="['/packs']" routerLinkActive="mat-accent">Pacchetti</button>
</mat-list-item>
<mat-list-item (click)="closeSidenav()"><button mat-button [routerLink]="['/pc']" routerLinkActive="mat-accent">Pc</button></mat-list-item>
<mat-list-item (click)="closeSidenav()"><button mat-button [routerLink]="['/rinnovi']" routerLinkActive="mat-accent">Rinnovi</button></mat-list-item>
</mat-list>
</mat-sidenav>
<mat-sidenav-content>
<app-header></app-header>
<div class="main" color="primary">
<div [hidden]="!loading" class="loader">
<app-progress-spinner></app-progress-spinner>
</div>
<div [hidden]="loading" class="router-output">
<router-outlet></router-outlet>
</div>
</div>
<app-footer></app-footer>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
check-permission.directive.ts
import { Directive, ElementRef, Renderer2, HostListener, HostBinding, Input, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { DataService } from '../services/shared-services/data.service';
@Directive({
selector: '[appCheckPermissions]'
})
export class CheckPermissionsDirective {
permissions: number[] = [];
constructor(
private data: DataService,
private element: ElementRef,
private renderer: Renderer2
) {
this.getPerms();
}
@Input() set appCheckPermissions(perm: number) {
if (this.permissions.includes(perm)) {
// console.log('ok');
} else {
// console.log('non autorizzato');
this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
}
}
getPerms() {
this.data.getPermissionsFromToken().subscribe(permsArr => {
this.permissions = permsArr;
});
}
}
编辑: permissions
的日志和_perm
刷新前登录:
刷新后:
编辑2
感谢 Sunil Singh 帮助我发现了这个问题:permissions
当我注销然后再次登录时,数据不可用,app.component
这需要 appCheckPermission
指令不会重新初始化,因此它会使用旧的权限数据,直到浏览器刷新。
解决方法是基于服务的,我不知道如何使用指令修复(Sunil Singh 方式不起作用)。所以我写了一个permissionService
:
permissions = [];
constructor(private data: DataService) {
this.getPerms();
}
getPerms() {
this.data.getPermissionsFromToken().subscribe(permsArr => {
this.permissions = permsArr;
});
}
isPacksManagerEnable() {
return this.permissions.includes(9);
}
getPerms()
方法在单击菜单按钮时触发,然后在 app.component
中触发我注入(inject)服务并调用 isPacksManagerEnable()
在模板上:
<mat-list-item (click)="closeSidenav()" *ngIf="permsService.isPacksManagerEnable()">
<button mat-button [routerLink]="['/packs']" routerLinkActive="mat-accent">Pacchetti</button>
</mat-list-item>
希望它能帮助解决我同样问题的人
最佳答案
Issue
指令中的permissions
和appCheckPermissions
存在问题。您正在检查异步数据权限
的权限,该权限在当时不可用。一旦加载了permissions
,您就不会触发负责隐藏和显示链接的setter appCheckPermissions
。
Fix
它有简单的修复,您需要确保每当权限发生变化
时,它应该触发权限检查。
修改版本
检查权限.directive.ts
import { Directive, ElementRef, Renderer2, HostListener, HostBinding, Input, OnInit, TemplateRef, ViewContainerRef, AfterViewInit } from '@angular/core';
import { DataService } from '../services/shared-services/data.service';
@Directive({
selector: '[appCheckPermissions]'
})
export class CheckPermissionsDirective implements AfterViewInit {
permissions: number[] = [];
constructor(
private data: DataService,
private element: ElementRef,
private renderer: Renderer2
) {
//this.getPerms();
}
private _perm;
@Input() set appCheckPermissions(perm: number) {
this._perm = perm;
this.doPermissionCheck();
}
doPermissionCheck(){
if (this.permissions.includes(this._perm)) {
this.renderer.setStyle(this.element.nativeElement, 'display', 'block');
// console.log('ok');
} else {
// console.log('non autorizzato');
this.renderer.setStyle(this.element.nativeElement, 'display', 'none');
}
}
ngAfterViewInit() {
this.data.getPermissionsFromToken().subscribe(permsArr => {
this.permissions = permsArr;
this.doPermissionCheck();
});
}
}
Note : Code is written directly in
stackoverflow editor
so there could be typo or syntactical errors. Please fix yourself.
关于javascript - Angular Material sidenav 指令在 app.component 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52930173/