angular 写一个结构型指令

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

应该显示

创建指令很像创建组件。

1. 这里是列表文本导入 Directive 装饰器（而不再是 Component）。

2. 导入符号 Input、TemplateRef 和 ViewContainerRef，你在任何结构型指令中都会需要它们。

3. 给指令类添加装饰器。

4. 设置 CSS 属性选择器 ，以便在模板中标识出这个指令该应用于哪个元素。

这里是起点：

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

声明变量

  buttonList: Array;
  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