Angular Material sidenav指令在app.component中不起作用

Question

我有一個帶有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>

入住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

感謝蘇尼爾·辛格的幫助我發現了問題： 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>

希望它對我的問題有幫助

Answer 1

問題

您在指令中存在permissions和appCheckPermissions問題。 您正在使用異步數據permissions檢查權限，該時間在那時不可用。 加載permissions ，您不會觸發設置程序appCheckPermissions ，后者負責隱藏和顯示鏈接。

固定

它具有簡單的修復程序，您需要確保每當permissions發生變化時，它都應觸發權限檢查。

修改版

入住permission.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();
    });
  }
}

注意：代碼是直接在stackoverflow editor編寫的，因此可能存在拼寫錯誤或語法錯誤。 請自行修復。