在Angular2中设置自定义属性指令

Question

我试图将一个服装属性指令设置为输入，但我找不到这样做的方法。

我的指示如下

@Directive({
    selector: '[disable-paste]'
})
export class DisablePaste {
    constructor(private _elementRef:ElementRef) {
        this._elementRef.nativeElement.onpaste = (e:any) => {
            e.preventDefault();
        }
    }
}

如果我只是将指令放在输入中，它就可以工作。但是，当我试图“有条件地”使用它时，却没有。我尝试了所有这些：

<input [disable-paste]="doNotAllowPaste" ... />
<input disable-paste="doNotAllowPaste" ... />
<input [attr.disable-paste]="doNotAllowPaste" ... />

Answer 1

我认为只要输入属性值发生变化，您就需要一个输入属性来有条件地执行逻辑：

@Directive({
  selector: '[disable-paste]'
})
export class DisablePaste {
  @Input('disable-paste') disablePaste:boolean;

  constructor(private _elementRef:ElementRef) {}
  ngOnChanges() {
    if(this.disablePaste) {
      this._elementRef.nativeElement.onpaste = (e:any) => {
         e.preventDefault();
      }
    } else {
      this._elementRef.nativeElement.onpaste = null; 
    }
  }
}

Answer 2

你可以试试这个：

@Directive({
  selector: '[disable-paste]'
})
export class DisablePaste {
  @Input('disable-paste')
  disablePaste:any;

  constructor(private _elementRef:ElementRef) {
    this._elementRef.nativeElement.onpaste = (e:any) => {
        e.preventDefault();
    }
  }
}

如果使用[...]，您将获得与指定表达式的求值相对应的对象。没有它们，就是一个字符串值。