时间戳

首页 > 解决方案 > 如何在角度 5 中动态生成 *ngxPermissionsOnly？

javascript - 如何在角度 5 中动态生成 *ngxPermissionsOnly？

问题描述

我已经动态创建了一个菜单，需要根据权限显示，但 *ngxPermissionsOnly 不起作用。请提出我做错了什么。

this.sidebarnavItems = [{
        path: '', title: 'User Managment', icon: 'icon-Double-Circle', class: 'has-arrow', label: '', labelClass: '', extralink: false, permission:'',
        submenu: [
            { path: '/user/vuser', title: 'User', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:''},
            { path: '/user/vstudent', title: 'Student', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:"'5','6','7','8'"},
            { path: '/user/vfaculty', title: 'Faculty', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:''},

        ]
    }]
<html>


<ul class="collapse" *ngIf="sidebarnavItem.submenu.length > 0" [ngClass]="{'in' : showMenu === sidebarnavItem.title }">
                    <li *ngFor="let sidebarnavSubItem of sidebarnavItem.submenu" [class.active]="showSubMenu === sidebarnavSubItem.title" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'active'" >
                      <span *ngxPermissionsOnly = "[sidebarnavSubItem.permission]">
                        <a  [routerLink]="sidebarnavSubItem.submenu.length > 0 ? null : [sidebarnavSubItem.path]" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'router-link-active'" [ngClass]="[sidebarnavSubItem.class]" *ngIf="!sidebarnavSubItem.extralink;" (click)="addActiveClass(sidebarnavSubItem.title)" >
                            <i [ngClass]="[sidebarnavSubItem.icon]" ></i>
                                {{sidebarnavSubItem.title}}
                        </a>
                        </span>


                    </li>
                </ul>



</html>

标签： javascriptangularangular5

解决方案

您的权限输入格式以及如何将其绑定到ngxPermissionsOnly指令存在问题。将您的更新sidebarnavItems为：

this.sidebarnavItems = [{
    path: '', title: 'User Managment', icon: 'icon-Double-Circle', class: 'has-arrow', label: '', labelClass: '', extralink: false, permission:'',
    submenu: [
        { path: '/user/vuser', title: 'User', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:[]},
        { path: '/user/vstudent', title: 'Student', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:['5','6','7','8']},
        { path: '/user/vfaculty', title: 'Faculty', icon: '', class: '', label: '', labelClass: '', extralink: false, submenu: [] ,permission:[]},

    ]
}];

然后将您的视图代码更新为：

<ul class="collapse" *ngIf="sidebarnavItem.submenu.length > 0" [ngClass]="{'in' : showMenu === sidebarnavItem.title }">
    <li *ngFor="let sidebarnavSubItem of sidebarnavItem.submenu" [class.active]="showSubMenu === sidebarnavSubItem.title" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'active'" >
    <span *ngxPermissionsOnly = "sidebarnavSubItem.permission">
        <a  [routerLink]="sidebarnavSubItem.submenu.length > 0 ? null : [sidebarnavSubItem.path]" [routerLinkActive]="sidebarnavSubItem.submenu.length > 0 ? '' : 'router-link-active'"
            [ngClass]="[sidebarnavSubItem.class]" *ngIf="!sidebarnavSubItem.extralink;" (click)="addActiveClass(sidebarnavSubItem.title)" >
            <i [ngClass]="[sidebarnavSubItem.icon]" ></i>
                {{sidebarnavSubItem.title}}
        </a>
    </span>
    </li>
</ul>

所以，在这里我刚刚更新*ngxPermissionsOnly = "sidebarnavSubItem.permission"了权限属性现在是 sidebarnavItems 对象中的数组。

Plunker Demo 进行验证。在这里检查 roles.component.ts

推荐阅读