Angular *ngxPermissionsOnly属性实现按钮的显示和隐藏

1、html代码

    <nz-button-group>
        <button nz-button (click)="onAddBusButtonClick()" *ngxPermissionsOnly="['SCHOOL']"><i nz-icon nzType="plus-square"></i>添加...</button>
        <button nz-button (click)="onEditBusButtonClick()" [disabled] = "selectedRow === null" *ngxPermissionsOnly="['SCHOOL']"><i nz-icon nzType="edit"></i>编辑...</button>
        <button nz-button (click)="onDeleteBusButtonClick()" [disabled] = "selectedRow === null" *ngxPermissionsOnly="['SCHOOL']"><i nz-icon nzType="delete"></i>删除...</button>
    </nz-button-group>

*ngxPermissionsOnly="['SCHOOL']"属性控制按钮的显示和隐藏

2、安装ngx-permissions类库

$ npm install ngx-permissions  --save

3、在html对应的typescript中进行配置
① 在构造函数中添加如下代码

private permissionsService: NgxPermissionsService

② 导入依赖模块

import { NgxPermissionsService } from 'ngx-permissions';

③ 使用

this.permissionsService.loadPermissions(["SCHOOL"]);

说明：loadPermissions中添加的值若和*ngxPermissionsOnly="['SCHOOL']"中的值相同，按钮即显示，否则隐藏。

4、详细使用参考：https://www.npmjs.com/package/ngx-permissions