如何在角度 5 中动态生成 *ngxPermissionsOnly？答案

【问题标题】：How make dynamically *ngxPermissionsOnly in angular 5?如何在角度 5 中动态生成 *ngxPermissionsOnly？
【发布时间】：2018-07-04 09:39:58
【问题描述】：

我已经动态创建了一个菜单，需要根据权限显示，但是 *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>

【问题讨论】：

您是否将 permissionsModule 包含到您的应用程序/核心模块中？
从文档中，我看到他们有only 和except .. 你确定不需要它们吗？
是的，我已经包含了 permissionsModule 如果我通过了静态权限，那么工作正常
您是否尝试将路由中的权限定义为数组，然后仅访问模板中的sidebarnavSubItem.permission？
@callback 我已经在路由中定义为一个数组。如果我将值静态设置为 ... 那么它工作正常。

标签： javascript angular angular5

【解决方案1】：

您的权限输入格式以及您如何将其绑定到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

【讨论】：

@PankajKumar 这正是我在上面评论中的意思.. :)