angular - 动态标题链接不起作用需要刷新角度 7

Question

我正在开发基于角色的权限，现在我需要在标题上显示链接，它来自数据库。

登录后我需要刷新页面以显示动态链接。

我已经使用了 ngx-permission 并加载了权限数组并检查了权限。

header.component.ts

import { Component, OnInit, AfterViewInit } from '@angular/core';
import { LoginService } from '../login.service';
import { Router } from '@angular/router';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
  permissionData = null
  permissionModule = null
  useremail = null
  perm = [];

  constructor(
    private loginApi: LoginService,
    private permissionsService: NgxPermissionsService,
    private http: HttpClient,
    private router: Router,
  ) {
    console.log("Header constuctor")
  }

  ngOnInit() {
    console.log('Header initialized')
    this.useremail = localStorage.getItem('useremail')
    this.perm.push(this.useremail)
    // console.log("User Email", this.useremail)
    this.checkUserPermissions()
  }

  logout() {
    this.loginApi.logout()
    this.router.navigate(['/login'])
  }

  checkUserPermissions() {
    let userID = localStorage.getItem('userid')
    if (userID) {
      this.loginApi.getAuthenticatedUserPermissions(userID).subscribe(res => {
        this.permissionModule = Object.keys(res[0].permissions[0])
        this.permissionData = res
        // ngx permission
        const perm = [];
        perm.push(this.permissionModule)
        this.permissionsService.loadPermissions(perm)
      }, error => {
        console.log(error)
      })
    }
  }

}

header.component.html

<div *ngIf="permissionModule?.length">
        <div *ngxPermissionsOnly="dashboard">
          <a routerLink="/barcharts">Dashboard</a>
        </div>
        <div *ngxPermissionsOnly="product management">
          <a routerLink="/productmanagement">Product Management</a>
        </div>
        <div *ngxPermissionsOnly="app userlisting">
          <a routerLink="/appuserlisting_new">App User Listing</a>
        </div>
      </div>

标签： angulartypescriptangular7