html textArea 使用 Angular 调整大小事件

我有一个类似行的布局，在行上，嵌入的 div 中有几个文本区域，如下所示：

 <div class="row-192">
  <div class="inner">
     <p>
       text
     </p>
     <textarea rows="4" cols="40"></textarea>
   </div>
 </div>

如果用户使用小三角形按钮调整文本区域的大小，我需要相应地调整当前行高（和其他属性）。我找到了一些解决方案jQuery http://jsfiddle.net/HhSYG/1/，但我只需要坚持 Angular 指令。

demo: http://jsfiddle.net/o0yvysL5/1/ http://jsfiddle.net/o0yvysL5/1/

最好，我需要某种我可以订阅的事件，例如<textarea (resize)="resizeEvent($event)" ...但没有。

有任何想法吗？

可调整大小的.textarea.directive.ts

@Directive({
  selector: 'textarea[resize]'
})
export class ResizableTextAreaDirective {
  @Output() resize = new EventEmitter();

  width: number;
  height: number;

  mouseMoveListener: Function;

  @HostListener('mousedown', ['$event.target'])
  onMouseDown(el) {
    this.width = el.offsetWidth;
    this.height = el.offsetHeight;
    this.mouseMoveListener = this.renderer.listen('document', 'mousemove', () => {
      if (this.width !== el.offsetWidth || this.height !== el.offsetHeight) {
        this.resize.emit({ width: el.offsetWidth, height: el.offsetHeight });
      }
    });
  }

  @HostListener('document:mouseup')
  onMouseUp(el) {
    this.ngOnDestroy();
  }

  constructor(private renderer: Renderer2) {}

  ngOnDestroy() {
    if (this.mouseMoveListener) {
      this.mouseMoveListener();
    }
  }
}

使用方法如下：

<textarea (resize)="resizeEvent($event)"></textarea>

堆栈闪电战示例 https://stackblitz.com/edit/angular-7pyqc4?file=app%2Fapp.component.html