Angular 2+：更改检测，属性更改和视图更新之间的状态

Question

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

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

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

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

   查看下面的图片:(更改文本属性将更改p的内容，从而改变dom中p元素的高度）

2. 结果： p的clientHeight仍然是先前的值，而不是最新的值。

   预期结果 ：最新值

3. 可能的解决方案：

   • 我知道ngAfterViewChecked每次都会在更改检测中被触发，它代表视图更新后的状态。
   • 针对此问题的一些解决方案可以强制更改检测发生如下： ApplicationRef.tick（）或ChangeDetectorRef.detectChanges（） （请参阅此处的答案： https ： //stackoverflow.com/a/34829089/7787645 ）

我的困惑：

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

 changeProperty(this.text => { this.text = 'A long long text'; }).then( () => { // here is the state after the corresponding text is updated in the view }) 

或者哪个是解决这个问题的正确方法？ 感谢任何想法！

Answer 1

没有这样的东西，我怀疑它会出现。

但是，您的特定问题可以以完全不同的方式解决。 只要你想控制text / html的渲染方式，就可以更容易地自己渲染它。

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

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

就是这样。 请记住，在分配它之前使用innerText或执行一些HTML innerText可能更好。