angular中的指令分为组件型指令、结构指令和属性指令

• 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。
• 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。
• 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令,以*开头,例如 *ngIf由于结构型指令会在 DOM 中添加和删除节点，因此每个元素只能应用一个结构型指令。

angular为我们提供了一些常用的指令,如果这些指令无法满足需求，我们还可以自定义指令。

结构型指令 - tlHasRole

作用:判断当前用户是否拥有某个角色，如果有则显示，否则隐藏

ts
import { Directive, Input, OnChanges, SimpleChanges, TemplateRef, ViewContainerRef } from "@angular/core";


@Directive({
    selector: '[tlHasRole]',
    exportAs: 'tlHasRole',
})
export class TlHasRoleDirective implements OnChanges{

    @Input('tlHasRole')
    roles:string[] = []

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

    }
    ngOnChanges(changes: SimpleChanges): void {
        if(this.roles.length){
            //这里一般需要配合service,获取登录用户的权限信息
            if(当前用户有该角色){
                this.createView()
            }else{
                this.viewContainer.clear()
            }
        }else{
            this.createView()
        }
    }

    // 创建视图
    private createView():void {
        // createEmbeddedView 第二个可选参数是用来设置模版上下文对象的
        this.viewContainer.createEmbeddedView(this.templateRef);
    }
    
}

使用

<button class="ui-button-primary" label="查询" icon="icon-search2" (click)="queryOK()" *tlHasRole="['admin']"> </button>