Angular 角度6材料菜单建筑，

由于我工作的公司的复杂性，我们有很多部门，每个部门都有很多角色。因此，使用管理员、工作人员和用户的典型角色并不能解决这个问题。因此，我使用位操作为每个部门/角色分配一个值，以防止复杂的用户访问控制字符串（用于路由和菜单）

我有下面的代码，但无论我做什么，我都无法使菜单项的子项可见或不可见，这取决于UAC值

import { Injectable } from '@angular/core';

export interface BadgeItem {
    type: string;
    value: string;
}
export interface Saperator {
    name: string;
    type ? : string;
}
export interface ChildrenItems {
    state: string;
    name: string;
    type ? : string;
}

export interface Menu {
    state: string;
    name: string;
    type: string;
    icon: string;
    badge ? : BadgeItem[];
    saperator ? : Saperator[];
    children ? : ChildrenItems[];
}

const MENUITEMS = [
    {
        state: '',
        name: 'Personal',
        type: 'saperator',
        icon: 'av_timer'
    },
    {
        state: 'dashboards',
        name: 'Dashboards',
        type: 'sub',
        icon: 'av_timer',
        children: [
            { state: 'dashboard1', name: 'Dashboard 1', UAC: 0 },
            { state: 'dashboard2', name: 'Dashboard 2', UAC: 128 },
        ]
    },
    {
        state: 'apps',
        name: 'Apps',
        type: 'sub',
        icon: 'apps',
        children: [
            { state: 'calendar', name: 'Calendar' },
            { state: 'messages', name: 'Mail box' },
            { state: 'chat', name: 'Chat' },
            { state: 'taskboard', name: 'Taskboard' }
        ],
        UAC: 256
    },
    {
        state: '',
        name: 'Forms, Table & Widgets',
        type: 'saperator',
        icon: 'av_timer'
    }, {
        state: 'datatables',
        name: 'Data Tables',
        type: 'sub',
        icon: 'border_all',

        children: [
            { state: 'basicdatatable', name: 'Basic Data Table' },
            { state: 'filter', name: 'Filterable' },
            { state: 'editing', name: 'Editing' },
        ]
    }, {
        state: 'pages',
        name: 'Pages',
        type: 'sub',
        icon: 'content_copy',

        children: [
            { state: 'icons', name: 'Material Icons' },
            { state: 'timeline', name: 'Timeline' },
            { state: 'invoice', name: 'Invoice' },
            { state: 'pricing', name: 'Pricing' },
            { state: 'helper', name: 'Helper Classes' }
        ]
    }

];

@Injectable()

export class MenuItems {

    getMenuitem(): Menu[] {

        // Get the JSON form of the stored user object
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));

        // If the user has logged in, then this user object will be non null
        if (currentUser && currentUser.token) 
        {
            var filtered_MENUITEMS = MENUITEMS.filter(obj => {

                let parentUAC: boolean = true;

                // Or are we using a UAC value instead.
                if(obj.UAC)
                {
                    // Current User UAC could be 256, using bit manipulation for the number of departments and roles.
                    parentUAC = ((obj.UAC & currentUser.UAC) > 0) ? true : false;
                } 

                // We are going to show the parent, now check the children.
                if( (parentUAC == true) && (obj.children) )
                {
                    // Need code in here to check for children of the menu item and removing if it's not meant to be visible.
                }

                return parentUAC;
            });

            return filtered_MENUITEMS;
        } 
        else 
        {
            return MENUITEMS;
        }

    }

}

我想我弄糊涂的问题是，我试图从过滤过的OBJ中删除子菜单或子菜单项，而它应该从主菜单对象中删除

我是新手，所以非常感谢您的帮助

---

感谢阅读。

我将您的默认值

parentUAC

更改为false

let parentUAC: boolean = false;

然后，我将您的

parentUAC

比较更改为此

 parentUAC = obj.UAC == currentUser.UAC ? true : false;

然后，我使用视图控制是否显示

子项

项

<button mat-button [matMenuTriggerFor]="menu3">Menu With UAC 256</button>
<mat-menu #menu3="matMenu">
    <div *ngFor="let item of getMenuitem({token:'1234', UAC:'256'})">
      <button *ngIf="!item.children" mat-menu-item>{{item.name}}</button>
      <button *ngIf="item.children" mat-menu-item [matMenuTriggerFor]="submenu">{{item.name}}</button>
      <mat-menu #submenu="matMenu">
        <button mat-menu-item *ngFor="let subItem of item.children">{{subItem.name}}</button>
      </mat-menu>
  </div>
</mat-menu> 

带有UAC 256的

菜单
{{item.name}
{{item.name}
{{subItem.name}

请参阅修订版stackblitz中带有UAC 256的

菜单

Stackblitz

以下是我最终使用的代码，以防将来对任何人都有帮助

@Injectable()

export class MenuItems {

    getMenuitem(): Menu[] {

        // Set the default UAC.
        let UAC: number = 0;

        // Get the JSON form of the stored user object
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));

        // If the user has logged in, then this user object will be non null
        if (currentUser && currentUser.token) 
        {
            // Overwrite the default UAC with the current users one.
            UAC = currentUser.UAC;
        }

        MENUITEMS.forEach(function(v, i){

                        // If there's a UAC, test it.
                        if( (v.UAC) && ( (v.UAC & UAC) != v.UAC))
                                MENUITEMS.splice(i, 1);

                        // If the menu item has children.
                        if(v.children)
                        {
                                let children: any = v.children;

                                children.forEach(function(w, j){

                                        // If a child has a UAC value, check it!
                                        if( (w.UAC) && ( (w.UAC & UAC) == w.UAC))
                                                MENUITEMS[i].children.splice(j, 1);
                                });

                        }
        })

        // Return the MENUITEMS.
        return MENUITEMS;
    }
}

这就是代码目前的状态，毫无疑问，它将随着项目的进展而进行调整。
对此感到抱歉。CurrentUser设置在本地存储器中&包含一些关于当前登录用户的基本信息，其中一部分是UAC值。值UAC来自数据库和Laravel后端API，它将用户限制在特定的路径上，而不是向所有人显示所有菜单项，只让某些菜单项起作用&对于其他菜单项不起作用的菜单项，我只想显示适用于特定UAC的菜单项。这可以是整个菜单部分（如页面），也可以是菜单部分中的单个菜单项。我正在努力解决的是后者。请看修改后的答案。谢谢元帅修改后的答案。虽然这与tin上的内容相同，但令牌来自当前用户，UAC值针对每个组或组中的每个项目进行编码。假设一家公司有三个部门，你只想让某些人看到他们需要的部门，而不是所有部门。您无法在模板中设置单个UAC，但必须在菜单项本身中进行设置。当用户登录时，即currentUser，他们将被分配一个UAC，该UAC限制他们看到的内容和可以去的地方。