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

标签 javascript angular typescript angular-material angular-directive

我有一个带有 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

刷新前登录:

enter image description here

刷新后:

enter image description here

编辑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

指令中的permissionsappCheckPermissions 存在问题。您正在检查异步数据权限的权限,该权限在当时不可用。一旦加载了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/

相关文章:

python - 吉普 错误!堆栈错误 : Can't find Python executable "C:\Users\Admin\Anaconda3\python.EXE", 您可以设置 PYTHON 环境变量

java - Angular 2/4 和 Jersey REST CORS 问题

javascript - 声明全局更新窗口不起作用

Highcharts TypeScript,y 轴标签

typescript :为什么类型别名满足约束但相同的接口(interface)不满足?

javascript - 类型错误:jasmine.getEnv().currentSpec 为空

javascript - Zurb Foundation 4 显示模态 : Won't close

angular - 是angular2 mvc吗?

php - 为什么这个注册表单ajax mysql insert在chrome和safari中有效,但在firefox中无效?

javascript - 我已经将这个简单的脚本组合在一起来旋转图片并将它们链接到指定的 URL,当我将鼠标悬停在图片上时如何让它暂停?