Question

我在一个非常简单的示例上使用Angular 6。

我正在创建一个指令，可以将其放在文本区域上，以便它们自动调整大小。

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

更糟糕的是，如果已手动调整大小，则此高度始终未定义。

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

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

我也意识到，我要尝试做的另一种选择是将指令的高度设置为本机元素scrollheight而不先检查，但后来我不明白为什么我的身高值未定义/不会动态更新。

这是我的代码：

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() {
  }

}

auto-resize-text-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) { }

}

感谢您的帮助

角6：指令中的主机绑定不是双向绑定吗？

0 个答案: