Угловой 6: Связывание хоста в директиве не является двухсторонним связыванием?

Я работаю над Angular 6 на довольно простом примере.

Я создаю Директиву, которую я могу поместить в свои текстовые поля, чтобы они автоматически меняли размеры.

Однако у меня есть проблема с использованием привязки хоста. Я хочу проверить, требуется ли изменение размера, прежде чем изменить размер, но я не могу проверить: this.height дает неопределенное значение по умолчанию.

Еще хуже, если он был изменен вручную, this.height остается неопределенным в любом случае.

Я попытался использовать декоратор @Input поверх @HostBinding, но он просто устанавливает начальное значение, а затем при изменении размера высота больше не соответствует реальному размеру элемента.

Кажется, я не могу понять, почему это не работает, не могли бы вы помочь?

Также я осознаю, что альтернативой тому, что я пытаюсь сделать, было бы просто установить высоту моей директивы равной высоте прокрутки собственного элемента без предварительной проверки, но тогда я не пойму, почему мое значение высоты не определено / не зависит т динамически обновлять.

Вот мой код:

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

}

Спасибо за вашу помощь

0 ответов

Другие вопросы по тегам