angular - 如何隐藏导航菜单中的名称？

Question

如何在特定用户的导航菜单中隐藏名称。即，我想为安装了“用户” Angular 色的用户隐藏“管理”。也就是说，如果用户以用户 Angular 色登录，则菜单列表中的名称“Administration”将为他隐藏。

:

import { Component, OnInit } from '@angular/core';
import {AuthService} from "../../services/auth/auth.service";

export interface RouteInfo {
    path: string;
    title: string;
    icon: string;
    class: string;
}

export const ROUTES: RouteInfo[] = [
    { path: 'notes',  title: 'Notes',  icon: 'ti-comment', class: '' },
    { path: 'contacts', title: 'Contacts',  icon:'ti-info', class: '' },
    { path: 'users', title: 'Users',  icon:'ti-user', class: '' },
    { path: 'user_notes', title: 'Notes (World)',  icon:'ti-world', class: '' },
    { path: 'admins', title: 'Administration',  icon:'ti-server', class: '' }
];

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css']
})

export class SidebarComponent implements OnInit {
  public menuItems: any[];

  constructor(
    public authService:AuthService
) {}

  ngOnInit() {
      this.menuItems = ROUTES.filter(menuItem => menuItem);
  }

}

html:

...
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
  <a [routerLink]="[menuItem.path]">
    <i class="{{menuItem.icon}}"></i>
    <p>{{menuItem.title}}</p>
  </a>
</li>
...

Answer 1

您可以在ROUTES 中多添加一个字段role。在过滤菜单时，您可以检查该菜单项是否允许 currentRole。

export const ROUTES: RouteInfo[] = [
    { path: 'notes',  title: 'Notes',  icon: 'ti-comment', class: '', role:[user, admin] },
    { path: 'contacts', title: 'Contacts',  icon:'ti-info', class: '', role:[user, admin] },
    { path: 'users', title: 'Users',  icon:'ti-user', class: '', role:[user, admin] },
    { path: 'user_notes', title: 'Notes (World)',  icon:'ti-world', class: '', role:[user, admin] },
    { path: 'admins', title: 'Administration',  icon:'ti-server', class: '', role:[admin] }
];

@Component({
  ...
})

export class SidebarComponent implements OnInit {
    ...
    currentRole: string; // set value in it in constructor

    constructor(public authService:AuthService) {
        this.currentRole = 'user'; // change value on the basis of login
    }

    ngOnInit() {
        this.menuItems = ROUTES.filter(menuItem => menuItem.role.includes(this.currentRole));
    }
}