Angular 自定義結構型指令 structural directive 的使用

Donjan發表於2019-12-18
AngularStruct

Angular的結構型指令的職責是 HTML 佈局。 它們塑造或重塑 DOM 的結構，比如新增、移除或維護這些元素。說白了就是對網頁的結構進行控制，NgIf，NgFor都是結構型指令。

建立src/app/helpers/directive.ts寫一個結構指令appCan

@Directive({ selector: '[appCan]' })
export class CanDirective {

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ) { }

    @Input() set appCan(param) { // 接收一個陣列的引數，第一個是使用者擁有的許可權，第二個為需要判斷的許可權
        const perms = param[0];
        const path = param[1];
        if (perms && perms.indexOf(path) > -1) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        } else {
            this.viewContainer.clear();
        }
    }
}

在src/app/app-routing.module.ts匯入

import { CanDirective} from './helpers/directive';

並新增到declarations

  declarations: [
    ...
    CanDirective,
    ...
  ]

就可以在模板裡使用了src/app/views/user/list.component.html，當使用者沒有/user-center/users/put這個許可權的時候，按鈕不會展示出來

<button *appCan="[app.permsArr,'/user-center/users/put']" nz-button nzType="primary" (click)='edit(m)'><i nz-icon
                        nzType="edit" nzTheme="outline"></i>編輯</button>

部落格：《PHP 微服務練兵》系列教程

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章