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

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

0 голосов
/ 10 сентября 2018

Я работаю над 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() {
  }

}

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

}

Спасибо за помощь

...