angular 写一个结构型指令

最新推荐文章于 2023-12-31 19:35:31 发布

chizhaoyi5484

最新推荐文章于 2023-12-31 19:35:31 发布

阅读量169

点赞数

文章标签： javascript 后端 ViewUI

原文链接：https://my.oschina.net/u/3615170/blog/1825671

版权

写一个名叫 kylinAcl 的结构型指令，用作控制页面上的按钮根据后端返回的权限是否删除和添加。

<button *kylinAcl="'button'">应该显示</button>

创建指令很像创建组件。

这里是列表文本导入 Directive 装饰器（而不再是 Component）。
导入符号 Input、TemplateRef 和 ViewContainerRef，你在任何结构型指令中都会需要它们。
给指令类添加装饰器。
设置 CSS 属性选择器，以便在模板中标识出这个指令该应用于哪个元素。

这里是起点：

import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
@Directive({
  selector: '[kylinAcl]'
})

声明变量

  buttonList: Array<string>;
  private hasView = false;
  private allow = false;

实现代码:

  @Input() set kylinAcl(buttonName: string) {
    this.buttonList.forEach((allowName) => { // 从拿到的按钮权限里面查找是否有此按钮名称
      if (allowName === buttonName) {
        this.allow = true;
      }
    });

    if (this.allow) { // 应该显示
      this.viewContainerRef.createEmbeddedView(this.templateRef);
      this.hasView = true;
    } else if (!this.allow) { // 应该从DOM移除  这里直接使用else没问题,使用else if 完全是作者喜好问题
      this.viewContainerRef.clear();
      this.hasView = false;
    }

  }

转载于:https://my.oschina.net/u/3615170/blog/1825671