У меня есть приложение с Material sidenav, sidenav показывает список со ссылками.одна из этих ссылок имеет директиву, которая скрывает ее, если разрешение пользователя не соответствует ожидаемому.Если я использую список внутри моего компонента заголовка, все работает нормально, но внутри моего компонента приложения директива не работает до перезагрузки приложения.Как я могу исправить?
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 -missions.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
спасибо Сунилу Сингху за помощь в обнаружении проблемы: данные 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 я внедряю службу и вызываю isPacksManagerEnable() в шаблоне:
<mat-list-item (click)="closeSidenav()" *ngIf="permsService.isPacksManagerEnable()">
<button mat-button [routerLink]="['/packs']" routerLinkActive="mat-accent">Pacchetti</button>
</mat-list-item>
Надеюсь, это поможет кому-то с моей проблемой