Угловой 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

Вот код, который я в конечном итоге использовал, на всякий случай, если он пригодится кому-либо в будущем.

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

Таков код в настоящее время, без сомнения, он будет подправлен как проектпрогрессирует.

Answer 2

Я изменил ваше значение по умолчанию 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> 

Пожалуйста, см. Menu With UAC 256 в исправленном стековозглаживании.

Штекблиц

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