如何巧妙地将多个角度事件处理程序引用到html元素

Question

我对angular2很新，我想知道是否有更短的方法来编写keypress和paste事件，以便html代码更具可读性（我使用的是Type Script） ：

 <textarea rows="1" class="txt" (keypress)="c()" (paste)="c()" [(ngModel)]="LeftText"></textarea>

Answer 1

当HTML模板与Angular逻辑混乱时，这意味着逻辑应该移动到指令/组件类。

在这种情况下，这可以是一个指令：

@Directive({  selector: '[modify]' })
class ModifyDirective  {
  @Input() modify;

  @HostListener('paste', ['$event.target'])
  @HostListener('keypress', ['$event.target'])
  onModify(e) {
    if (this.modify) {
      this.modify(e);
    }
  }
}

使用的是

<textarea [modify]="c">

请注意，c作为回调传递给指令，这意味着应该将方法绑定到上下文以保持正确的this。