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

Posted 2023-03-13

【中文标题】Angular：组件上的功能是不是针对组件的每个实例执行？

【英文标题】：Angular: Do functions on components execute for each instance of the component?Angular：组件上的功能是否针对组件的每个实例执行？

【发布时间】：2020-04-03 01:16:22

【问题描述】：

我的 Angular 应用程序中有一个组件，其模板包含同一组件的两个额外实例，如下所示（在 component1 的模板中）：

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

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

是否会为组件的所有现有实例触发这样的函数？

【参考方案1】：

其实这取决于你是如何触发函数的。

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

export class AppComponent  
  name = 'Angular';

  func() 
    alert("hovered")
  

仅当您将鼠标放在正确的组件上时才会调用一次。在这里你可以找到我是如何在StackBlitz复制它的