bixi/src/app/routes/idea/pages/ac/ac.component.html

企业级中后台前端解决方案

<nz-switch [(ngModel)]="isRole" nzCheckedChildren="角色" nzUnCheckedChildren="权限"></nz-switch>
<br>
<div style="border: 1px solid #000; padding: 20px;">
  <div *ngIf="permissions && roles">
    所有角色：{{ roles | json}}
    <br>
    所有权限：{{ permissions | json}}
  </div>
</div>
<br>
<div style="border: 1px solid #000; padding: 20px;">
  <ng-template [ac]="['app.view', 'app.delete']" [isRole]="isRole">
    <div>全部['app.view', 'app.delete']</div>
  </ng-template>
  <ng-template [acAny]="['app.view', 'app.delete']" [isRole]="isRole">
    <div>任意['app.view', 'app.delete']</div>
  </ng-template>
  <ng-template [ace]="['app.view', 'app.delete']" [isRole]="isRole">
    <div>除了全部['app.view', 'app.delete']</div>
  </ng-template>
  <ng-template [aceAny]="['app.view', 'app.delete']" [isRole]="isRole">
    <div>除了任意['app.view', 'app.delete']</div>
  </ng-template>
  <br>
  <br>
  <nz-select style="width: 500px;" [nzMaxTagCount]="3" nzMode="multiple" nzPlaceHolder="选择"
    [(ngModel)]="selected" (ngModelChange)="onChange($event)">
    <nz-option *ngFor="let item of items" [nzLabel]="item.text" [nzValue]="item.value"></nz-option>
  </nz-select>
</div>

<br>