Javascript 角度2+；：更改检测，属性更改和视图更新之间的状态

--------------更新---------------

ChangeDetectorRef.detectChanges（）运行组件及其子组件的更改检测器。因此，这可能是一个解决方案

--------------原始问题----------------

目的：我希望在组件中的特定dom元素更新后得到通知

请参见下面的图片： （更改text属性将更改p的内容，这反过来会更改dom中p元素的高度）

结果: p的clientHeight仍然是以前的值，而不是最新的值

预期结果：最新值

可能的解决办法：

• 我知道，ngAfterViewChecked每次在更改检测中都会被触发，它代表视图更新后的状态
• 此问题的一些绕场解决方案可能是强制执行更改检测，如：ApplicationRef.tick（）或ChangeDetectorRef.detectChanges（）（请参见此处的答案：）

4。我的困惑：

• 我想要的是组件中特定DOM元素更新后的状态
• ngAfterViewChecked将被每个异步函数触发（默认情况下），我认为这不适合这里
• 和ApplicationRef.tick（）或ChangeDetectorRef.detectChanges（）可以强制触发更改检测，这将解析整个组件树（从根到子组件），我认为这可能成本太高
• 我想知道是否有这样的功能：

changeProperty（this.text=>{
this.text='长文本'；
}).然后（（）=>{
//以下是在视图中更新相应文本后的状态
})

没有类似的事情，我怀疑它是否会出现

然而，你的特殊问题可以用完全不同的方式解决。只要您想控制文本/html的呈现方式，您就可以更轻松地自己呈现它

只需设置innerHTML，适当的高度就会到位

changeText(para) {
  para.innerHTML = 'long text';
  console.log(para.clientHeight);
}

---

就这样。请记住，最好使用

innerText

或在这样分配它之前执行一些HTML清理。

ngAfterViewChecked

。。。我认为这不合适，也许再一次考虑一下。DOM在更改检测期间更新，并且

ngAfterViewChecked

告诉您DOM何时完成更新。@smnbbrv的解决方案虽然在浏览器中工作，但可能无法在其他平台上工作，如webworker、universal、nativescript等。@AngularInDepth.com，我也同意你的想法，因为每次更改检测完成后，NgaAfterViewChecked都会被解雇。对于这个问题，我只想获取一个DOM组件的最新状态。ngAfterViewChecked太“大”。我找到的一个可能的解决方案是使用ChangeDetectorRef.detectChanges（）强制更改检测更新异步回调函数中的视图，这意味着强制此过程更早发生。好的，我在中对此进行了深入介绍。它的副作用是对所有组件运行更改检测。只是一个想法，如果你对一个特定的属性感兴趣，也许考虑使用一个指令来渲染它的值，并通过输入。