angular封装自定义指令，让参数和指令重名，简化使用。

1、场景：

封装的_disabled指令，希望对它直接赋值使用，不想写个_disable指令，再传个参数来进行赋值。

<input nz-input type="string" placeholder="" name="sysOs" maxlength="100" _disable [disabled]="true">
<input nz-input type="string" placeholder="" name="sysOs" maxlength="100" [_disabled]="true">

实现：将指令名称 selector: '[_disabled]', 和参数设置的字符串保持一致，对它进行赋值时，即可进行一些操作。

@Input('_disabled') set condition(_disabled: boolean) {
    this.__disabled =_disabled;
    this._setDisabled();
  };

import {
  Directive,
  Input,
  ElementRef,
  Renderer2,
  AfterViewInit,
} from '@angular/core';

@Directive({
  selector: '[_disabled]',
})

export class DisabledDirective implements AfterViewInit {
  constructor(
    private el: ElementRef,
    private renderer2: Renderer2
  ) {
  }
  private __disabled: boolean; // 私有化中间变量
  @Input('_disabled') set condition(_disabled: boolean) {
    this.__disabled =_disabled;
    this._setDisabled();
  };
  /**
   * 设置_disabled的状态和样式
   */
  private _setDisabled() {
    if (this.nativeEl && this.renderer2) {
      if (this.__disabled) {
        this.renderer2.addClass(this.nativeEl, 'ant-input-disabled');
        this.renderer2.setAttribute(this.nativeEl, 'disabled', 'disabled');
      } else {
        this.renderer2.removeClass(this.nativeEl, 'ant-input-disabled');
        this.renderer2.removeAttribute(this.nativeEl, 'disabled');
      }
    }
  }
  ngAfterViewInit() {
    this._setDisabled();
  }
  // 缓存当前dom
  nativeEl = this.el.nativeElement;
}