gpt4 book ai didi

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

转载 作者:太空狗 更新时间:2023-10-29 18:23:05 25 4
gpt4 key购买 nike

如何在特定用户的导航菜单中隐藏名称。即,我想为安装了“用户” 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>
...

最佳答案

您可以在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));
}
}

关于angular - 如何隐藏导航菜单中的名称?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51893915/

25 4 0