Angular 双花括号表达式在鼠标上下移动时被执行多次
Angular double curly braces expressions being executed multiple times on mouse down and up
在我们的 Angular 应用中，给出如下代码：
<div>{{ aGetProperty }}</div>
<div>{{ aMethod() }}</div>
每当我点击页面上的任何地方时，这些表达式都会被计算多次。也就是说，如果我在 aMethod 中放置一个 console.log('hello')，每次我按下鼠标左键或右键时，hello 都会多次输出到控制台，并在鼠标松开时多次输出.
有人知道是什么导致了这个问题吗？我没有为组件或其上方的任何内容绑定任何单击、鼠标 up/down 事件（据我所知）。谢谢
Angular 实际上修补了浏览器的 low-level API：例如，addEventListener 被修补以检查 DOM 中的更改并重新呈现视图。因此，当您单击 DOM 元素时，Angular 将 运行 更改检测并且您在 DOM 中的方法调用将被执行。换句话说：从 DOM 绑定方法是一种不好的做法 - 除非它明确地是一个 on/click 事件 - 因为该方法将在生命周期中的每个更改检测中执行。当然，有时您确实希望某些方法在每次更改时都触发，但请确保这正是您想要的。
在我们的 Angular 应用中，给出如下代码：
<div>{{ aGetProperty }}</div>
<div>{{ aMethod() }}</div>
每当我点击页面上的任何地方时，这些表达式都会被计算多次。也就是说，如果我在 aMethod 中放置一个 console.log('hello')，每次我按下鼠标左键或右键时，hello 都会多次输出到控制台，并在鼠标松开时多次输出.
有人知道是什么导致了这个问题吗？我没有为组件或其上方的任何内容绑定任何单击、鼠标 up/down 事件（据我所知）。谢谢
Angular 实际上修补了浏览器的 low-level API：例如，addEventListener 被修补以检查 DOM 中的更改并重新呈现视图。因此，当您单击 DOM 元素时，Angular 将 运行 更改检测并且您在 DOM 中的方法调用将被执行。换句话说：从 DOM 绑定方法是一种不好的做法 - 除非它明确地是一个 on/click 事件 - 因为该方法将在生命周期中的每个更改检测中执行。当然，有时您确实希望某些方法在每次更改时都触发，但请确保这正是您想要的。