Angular：组件上的功能是否针对组件的每个实例执行？

Question

我的Angular应用程序中有一个组件，该组件的模板包括同一组件的两个其他实例，例如（在component1的模板中）：

<div>
  <...other tags...>
  <component1></component1>
  <component1></component1>
</div>

component1具有在（鼠标悬停）上触发的功能。但是，当我将鼠标悬停在外部component1上而 not 不在component1的两个嵌套实例上时，该函数将被触发3次。

这样的功能是否会为该组件的所有现有实例触发？

Answer 1

实际上，这取决于您如何触发该功能。

<div>
  <hello></hello>
  <hello (mouseover)="func()"></hello>
</div>

export class AppComponent  {
  name = 'Angular';

  func() {
    alert("hovered")
  }
}

仅当您将鼠标放在正确的组件上时，才调用一次。在这里您可以找到我在format codes

上的复制方式