Question

我已经开始使用角度5的简单SPA，但现在我陷入了每次悬停卡时调用函数 getFullPathUrl（）的问题。函数 getFullPathUrl（）得到类似'test.jpg'和尺寸的内容并返回 www.test.com/156x0/test/test.jpg 。假设只在初始化权限时设置img src？如果我错了，还是纠正我。现在，如果我悬停我的任何卡片功能被调用40次，当我的鼠标离开卡片时，它会被再次调用很多次。

  <div class="card" *ngFor="let item of galleries;let i = index;" [routerLink]="['/'+item.path]"
         (mouseenter)=" setBackground(item.image.fullpath)"
         (mouseover)="showCount = true" (mouseleave)="showCount = false">
        <img class="card-img-top"
             [src]="getFullPathUrl(item?.image?.fullpath,156)" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title imagesCount"></h4>
            <h4 class="card-title title">{{item.name}}</h4>
        </div>
    </div>

Answer 1

问题是您的模板上有函数调用。这意味着在每次更改检测时都会调用该函数。由于鼠标事件触发更改检测，这就是您拥有该行为的原因。您需要做的是在组件的属性上设置该函数的返回值，然后在模板上放置一个变量。

修改

考虑到你的情况，你会有类似
的东西
[src]="rootPath + ‘156x0/test’ + item?.image”

rootPath将是您组件上的变量。像
这样的东西
rootPath: string = “www.test.com/“

这显然在解决方案上看起来并不是最漂亮但我只是在解释为了将现有的函数调用分解为变量你必须做些什么。你的路径组成看起来有点棘手，所以你需要那个奇怪的字符串连接。

angular 5函数一直在调用悬停

1 个答案: