通过指令快速实现元素“空状态”

类似管理系统之类的页面中，经常会用到没有数据时显示对应的空状态，常规的做法是在数据块之后添加空状态元素并使用if或者绑定hidden样式实现。在开发中也可以通过指令实现自动控制空状态组件的显示隐藏，不必在每处手动添加额外的元素。本文以Angular框架为例。

 一、新建Directive模块

Directive能够更改DOM元素或组件的外观和行为，通过判断父元素传入的参数，在指令中修改父元素的DOM内容即能完成空状态的自动显示隐藏

// ElementRef注入绑定该指令的元素，Input获取组件传入的参数
import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
  selector: "[empty]", // 指令名称
})
export class EmptyDirective {
  // 创建空状态节点
  node = document.createElement("div");
  // 传入的空状态提示信息
  @Input() emptyInfo = "";
  // 传入的需要校验的值--变化时触发样式修改
  @Input()
  set emptyData(data: any[]) {
    if (!data.length && !this.el.nativeElement.contains(this.node)) {
      // 源父组件中没有子元素且不含空元素组件时->添加空元素组件