Angular OnMouseOver 调用父组件中返回输入值的函数答案

【问题标题】：Angular OnMouseOver invoke function in parent component that return input valueAngular OnMouseOver 调用父组件中返回输入值的函数
【发布时间】：2021-04-05 17:54:10
【问题描述】：

我试图理解为什么在父组件的子调用方法中将鼠标悬停在项目上。这是示例link

我有将项目传递给子组件（列表）的父组件，如下所示：

<app-list [items]="getItems()"></app-list>
...
  items = [
    {
      label: 'test',
    },
    {
      label: 'foo',
    },
  ];

  getItems(): any[] {
    console.log('getItems');
    return this.items;
  }

在应用列表组件中：

<li *ngFor="let item of items" (mouseover)="onMouseOverOption(item)" role="option">
  <span>{{ item.label }}</span>
</li>

  onMouseOverOption(item) {
    console.log("onMouseOverOption", item);
  }

每当我将鼠标悬停在列表项上时，都会调用 getItems() 方法 - 两次。有人可以向我解释这种行为吗？

谢谢

【问题讨论】：

检查这个：stackoverflow.com/questions/41645325/…

标签： angular

【解决方案1】：

它被称为角度检测更改系统。您可以在此处了解更多信息： https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496

【讨论】：

感谢您的链接

【解决方案2】：

这是因为ngOnChanges() 方法。每当您在 ngFor 或 ngIf 中使用函数时，都会出现此问题。

使用变量总是安全和更好的，因为它的值不会总是改变，但是当你调用一个方法时，无论何时你在做(mouseover)，它都会得到返回的项目并再次调用相同的方法.

此问题的简单解决方案 ==> 不要调用 getItems() 方法，而是直接分配 items 变量。

我在stackblitz中改了：请看一下：

https://stackblitz.com/edit/angular-ivy-7aupnm?embed=1&file=src/app/list/list.component.ts

变化可见app.component.html。

【讨论】：

感谢您的回复，我使用了 getItems 方法，因为我需要对数组中的项目进行一些转换。我会在其他地方做，比如onchange。对我来说奇怪的部分是 onchange 生命周期方法永远不会在悬停时调用，所以为什么调用 getItems 方法
如果是这种情况，您可以使用按引用调用、方法和操作数据，然后将其取回并将其存储在新变量中。查看这个 stackblitz：stackblitz.com/edit/angular-ivy-7aupnm?embed=1&file=src/app/… .. 我在 app.component.ts 和 app.component.html 中进行了更改
您可以修改任何您想要的内容，然后返回一个局部变量并将其分配给一个新变量/现有变量。你不需要使用 ngOnChanges。 ngOnChanges 仅在有更改输入流时才需要使用。我假设的情况并非如此。
基本上这个数组是输入元素的一个属性，它可能会随着时间的推移而改变，所以我认为最好的解决方案是使用 ngOnChange
那好吧。你有两种方法来解决它，