Angular 5功能不断呼唤悬停

Question

我已经开始在Angular 5中的一个简单的水疗中心工作，但是现在我每次ie > function getfullpathurl（）都陷入困境。悬停卡。函数 getfullpathurl（）获得类似'test.jpg'和dimensions and Dimensions的东西，然后返回 www.test.com/156x0/test/test/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/“

这显然在解决方案方面看起来并不是最漂亮的，但是我只是在解释将现有函数调用到变量中所需要做的事情。而且您的路径构图似乎有些棘手，所以这就是为什么您需要奇怪的字符串串联的原因。