Angular 雙花括號表達式在鼠標向下和向上執行多次

Question

在我們的 Angular 應用程序中，給出如下代碼：

<div>{{ aGetProperty }}</div>

<div>{{ aMethod() }}</div>

每當我單擊頁面上的任意位置時，都會多次評估這些表達式。 也就是說，如果我在 aMethod 中放置一個 console.log('hello')，每次按下鼠標左鍵或右鍵時，hello 都會多次輸出到控制台，並且在鼠標向上時會再次輸出多次。

任何人都知道可能導致此問題的原因是什么？ 我沒有為組件或它上面的任何東西綁定任何點擊、鼠標向上/向下事件（據我所知）。 謝謝。

Answer 1

Angular 實際上修補了瀏覽器的低級 API：例如，修補了 addEventListener 以檢查 DOM 中的更改並重新呈現視圖。 因此，當您單擊 DOM 元素時，Angular 將運行更改檢測，並且您在 DOM 中的方法調用將被執行。 換句話說：從 DOM 綁定方法是一種不好的做法 - 除非它明確是 on/click 事件 - 因為該方法將在生命周期中的每個更改檢測時執行。 當然，有時您確實希望某些方法在每次更改時觸發，但請確保這正是您想要的。