Как получить размер HTMLElement с переменным текстом после изменения текста в Angular 7?

Question

Я создал компонент с атрибутом ввода text и открытым свойством height.После изменения text необходимо вычислить высоту компонента и установить для нее свойство height.

Проблема: HTML-код не отображается сразу после установки текста, так что высота равна 0. ЕслиЯ прочитал высоту элемента в вызове setTimeout(), получил правильную высоту.

Я загрузил тестовый проект в StackBlitz: https://stackblitz.com/edit/angular-ivw9d7

Что приложение делает:

1. Установить текст testComponent с помощью lorem ipsum.
2. Получить высоту сразу после установки текста и записать ее в консоль.
3. Получить высоту сразу через 2 секунды после установки текста изапишите его в консоль.

На шаге 2. высота равна 0, на шаге 3. высота такая, как должна быть.

Answer 1

Свойство text TestComponent привязано к свойству testText AppComponent:

<app-test-component #testComponent [text]="testText"></app-test-component>

, и вы запускаете обнаружение изменений, когда свойство text изменяется вTestComponent:

@Input() set text(value: string) {
  this._text = value;
  this.cd.markForCheck();
  this.cd.detectChanges();
}

Проблема в том, что при изменении testText в AppComponent установщик свойства text в TestComponent будет вызываться только при следующем цикле обнаружения изменений.Вы можете устранить задержку, принудительно обнаружив изменения, как только testText будет изменен в AppComponent:

this.testText = "Some new text";
this.cd.detectChanges();
console.log(`height right after changing is ${this.testComponent.height}`);

Чтобы убедиться, что обнаружение изменений всегда срабатывает после изменения testText, вы можете определить егокак свойство получателя / установщика и вызовите ChangeDetectorRef.detectChanges в установщике:

public _testText = '';

get testText(): string {
  return this._testText;
}
set testText(value: string) {
  this._testText = value;
  this.cd.detectChanges();
}

С этим кодом вам не нужно принудительно обнаруживать изменения в TestComponent.

См. этот стек для демонстрации.

Answer 2

Вы делаете все и просто не проверяете журнал после инициализации просмотра.

Добавьте консоль в ngAfterViewInit() ловушку.Само ваше представление не инициализируется в ngOnInit()

ngAfterViewInit() {
    console.log(`height right after changing is ${this.testComponent.height}`);
}

Отладка

Когда вы пытаетесь получить высоту элемента в ngOnInit(), попробуйте добавить это какхорошо до консоли:

console.log(JSON.stringify(this.testComponent.el));

Вы увидите вывод в консоли как: {"nativeElement":{}} Видите, элемента нет, поэтому высоты нет.( Примечание : важно «заштриховать» консоль, иначе журнал будет иметь обновленное значение).

Нет необходимости вызывать обнаружение изменений вручную и setTimeouts для получения обновленного значения.