2

我正在一个非常简单的例子上研究 Angular 6。

我正在创建一个指令，我可以将它放在我的 textareas 上，以便它们自动调整大小。

但是，我在使用主机绑定时遇到了问题。我想在调整大小之前检查是否需要调整大小，但我无法检查：this.height 默认为 undefined。

更糟糕的是，如果它已经手动调整大小，this.height 仍然是未定义的。

我尝试在@HostBinding 之上使用@Input 装饰器，但这只是设置了一个初始值，然后在调整大小时，高度与元素的实际大小不再匹配。

我似乎无法找出为什么它不起作用，你能帮忙吗？

我也意识到我正在尝试做的另一种方法是将我的指令的高度设置为本机元素的滚动高度而不事先检查，但是我不明白为什么我的高度值是未定义的/doesn' t 动态更新。

这是我的代码：

simple.component.html

<textarea type="text"
class="form-control mb-1"
appAutoResizeTextArea></textarea>

simple.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-simple-component',
  templateUrl: './simple.component.html',
  styleUrls: ['./simple.component.css']
})
export class SimpleComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

自动调整大小文本area.directive.ts

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

@Directive({
  selector: '[appAutoResizeTextArea]',
})
export class AutoResizeTextAreaDirective {
  @HostBinding('style.height.px') height;

  @HostListener('input')
  onKeyDown(){
    console.log(this.height); // gives 'undefined'
    if(this.height < this.el.nativeElement.scrollHeight || this.height > this.el.nativeElement.scrollHeight)
      this.height = this.el.nativeElement.scrollHeight;
  }
  constructor(private el:ElementRef, private renderer:Renderer2) { }

}

谢谢你的帮助

4

0 回答 0