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

Question

I am trying to set a costume attribute directive to an input but I couldn't find the way to do it.

My directive is the following

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

If I just put the directive by its own in the input, it works. But when I try to use it "conditionally" it doesn't. I tried all these:

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

Answer 1

I think you need an input property in order to conditionally execute your logic, whenever the input property value changes:

@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

You coulsd try this:

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

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

If you use [...] , you will get an object corresponding to the evaluation of the specified expression. Without them, a string value.