未使用 Angular 2 指令在元素上设置高度

Question

我正在尝试创建一个流畅的文本区域，但在使用 "the angular 2 way" 进行 DOM 操作时，我无法在元素上设置高度。

组件：

import {Directive, ElementRef, HostBinding, HostListener} from '@angular/core';

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

export class FluidHeightDirective {

  constructor(private _elementRef: ElementRef) {}

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

  setHeight() {
    this.height = this._elementRef.nativeElement.scrollHeight + 'px';
  }
}

标记：

<textarea [(ngModel)]="model" fluidHeight></textarea>

为什么我在 setHeight 函数中得到了正确的值，但在 textarea 中没有设置高度？

Answer 1

如果您在

中使用 .px

@HostBinding('style.height.px')

你也应该不在这里添加它

this.height = this._elementRef.nativeElement.scrollHeight + 'px';

使用其中之一

@HostBinding('style.height')

或

    this.height = this._elementRef.nativeElement.scrollHeight;

未使用 Angular 2 指令在元素上设置高度

Height not being set on element using Angular 2 directive

angular2-directives

angular