Angular 2 检测指令中对只读输入的 [ngModel] 绑定的更改

Question

我有这个指令，它根据内容在文本区域上设置流体高度：

@Directive({
  selector: '[fluidHeight]',
  host: {
    '(ngModelChange)': 'setHeight()'
  }
})

export class FluidHeightDirective implements AfterViewInit {

  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    this.setHeight();
  }

  @HostBinding('style.height.px')
  height: number;

  setHeight() {
    console.log(true)
    this.height = this.elementRef.nativeElement.scrollHeight;
  }
}

但是，当我将 [ngModel] 与 readonly 一起使用时，我无法让它工作：

<textarea [ngModel]="foo" fluidHeight readonly></textarea>

还有另一个文本区域可以更改 readonly 输入的内容。

我试过使用 ngModelChange、change 和 input，但其中 none 似乎有效。

有人知道怎么做吗？

Answer 1

一个 setter 应该可以解决问题：

export class FluidHeightDirective implements AfterViewInit {

    @Input('fluidHeight')
    set content(content:any) {
        this.setHeight();
    }

    constructor(private elementRef: ElementRef) {}

    ngAfterViewInit() {
        this.setHeight();
    }

    @HostBinding('style.height.px')
    height: number;

    setHeight() {
        console.log(true);
        this.height = this.elementRef.nativeElement.scrollHeight;
    }
}

Angular 2 检测指令中对只读输入的 [ngModel] 绑定的更改

Angular 2 detect changes to a readonly input's [ngModel] binding in directive

typescript

angular2-directives

angular