如何在 Angular 7 中更改文本后获取具有可变文本的 HTMLElement 的大小？

Question

我创建了一个具有输入属性 text 和 public 属性 height 的组件。更改 text 后，应计算组件的高度并将其设置为 height属性.

问题：设置文本后 HTML 似乎没有立即呈现，因此高度为 0。如果我在 setTimeout() 调用中读取元素的高度，我得到正确的高度.

我将测试项目上传到 StackBlitz： https://stackblitz.com/edit/angular-ivw9d7

该应用程序的作用是：

用 lorem ipsum 设置 testComponent 的文本。
设置文本后立即获取高度并写入控制台。
设置文字后2秒获取高度并写入控制台

第2步中高度为0，第3步中高度为应有的高度

Answer 1

您什么都做了，只是在视图初始化后没有检查日志。

在 ngAfterViewInit() 挂钩中添加您的控制台。您的视图本身未在 ngOnInit()

中初始化

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

调试

当您尝试在 ngOnInit() 中获取元素的高度时，请尝试将其也添加到控制台：

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

您将在控制台中看到输出为：{"nativeElement":{}} 看，没有元素，所以没有高度。（注意："stringify"控制台很重要，否则日志会有更新值。

无需调用手动更改检测和 setTimeouts 来获取更新值。

Answer 2

TestComponent的text属性绑定到AppComponent的testText属性:

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

问题是当你修改AppComponent中的testText时，只会调用TestComponent中的text 属性 setter在下一个变化检测周期。一旦在 AppComponent:

中修改了 testText，您就可以通过强制更改检测来消除延迟

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

要确保在修改 testText 后始终触发更改检测，您可以将其定义为 getter/setter 属性，并在 [=] 中调用 ChangeDetectorRef.detectChanges 44=]:

public _testText = '';

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

使用该代码，您无需在 TestComponent.

中强制进行更改检测

有关演示，请参阅 this stackblitz。

如何在 Angular 7 中更改文本后获取具有可变文本的 HTMLElement 的大小？

How to get size of a HTMLElement with variable text after changing text in Angular 7?

typescript

angular-components

angular

angular-changedetection