Angular 6材质菜单构建，

Question

由于我工作的公司的复杂性，我们有多个部门，每个部门内都有许多角色。 因此，使用管理员，员工和用户的典型角色根本不会削减成本。 因此，我正在使用位操作为每个部门/角色分配一个值，以防止复杂的用户访问控制字符串（用于路由和菜单）。

我有下面的代码，但是无论我做什么，我都无法根据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中删除子菜单或子菜单项，而应从主菜单对象中将其删除。

我是Angular的新手，因此非常感谢您的帮助。

谢谢阅读。

Answer 1

我将您的默认parentUAC更改为false

let parentUAC: boolean = false;

然后，我将您的parentUAC比较更改为此。

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

然后，我使用该视图来控制是否显示children项。

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

请参阅修订后的stackblitz中的Menu With UAC 256 。

Stackblitz

https://stackblitz.com/edit/angular-v43gjg?embed=1&file=app/menu-overview-example.ts

Answer 2

这是我最终使用的代码，以防万一将来对任何人有帮助。

@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;
    }
}

这就是当前代码的样子，毫无疑问它将随着项目的进行进行调整。