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可能更好。