<div class="alain-default__content-title">
  <h1>
    ACL 访问控制
    <small>注意观察左边的菜单；ACLService提供一个完整的基于角色的访问控制的服务，若需要支持路由守卫，请配合ACLService与Route Guard配合简便实现。</small>
  </h1>
</div>
<div nz-row [nzGutter]="8">
  <div nz-col [nzSpan]="24">
    <nz-card nzTitle="按钮粒度">
      ACL原始数据：{{ aclSrv.data | json }}
      <button nz-button [acl]="'role-a'">role-a</button>
      <button nz-button [acl]="'role-b'" class="ml-sm">role-b</button>
    </nz-card>
  </div>
</div>
<div nz-row [nzGutter]="8">
  <div nz-col [nzSpan]="8">
    <nz-card nzTitle="全量">
      <button nz-button (click)="toggleFull()">
        <span>{{ full ? '离开' : '设置'}}权限</span>
      </button>
      <p class="pt-md">全量类指系统管理员角色，无任何受限。</p>
    </nz-card>
  </div>
  <div nz-col [nzSpan]="8">
    <nz-card nzTitle="角色[role-a]">
      <button nz-button (click)="toggleRoleA()">
        <span>{{ roleA.length > 0 ? '离开' : '设置'}}权限</span>
      </button>
    </nz-card>
  </div>
  <div nz-col [nzSpan]="8">
    <nz-card nzTitle="角色[role-b]">
      <button nz-button (click)="toggleRoleB()">
        <span>{{ roleB.length > 0 ? '离开' : '设置'}}权限</span>
      </button>
    </nz-card>
  </div>
</div>
