角度5の機能は、私は、角5に簡単なSPA上で作業を開始しているホバー

Question

を上の呼び出し続けますが、今は機能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

問題は、テンプレートに関数呼び出しがあることです。これは、関数が呼び出されるたびに変更検出が行われることを意味します。マウスイベントが変化検出をトリガーするので、あなたはその動作をしています。あなたがしなければならないことは、コンポーネントのプロパティにその関数の戻り値を設定してから、テンプレートに変数を設定するだけです。

編集

あなたはrootPathがあなたのコンポーネントになければならない変数になり

[src]="rootPath + ‘156x0/test’ + item?.image” 

のようなものを持っているでしょう、あなたのケースのシナリオを考えます。

rootPath: string = “www.test.com/“ 

ような何かがこれは明らかに解決の面できれいに見えませんが、私はちょうどあなたが変数に既存の関数呼び出しを破るためにしなければならないだろうか説明しています。そしてあなたのパスの構成はちょっと難しいようです。そのため、あなたはその奇妙な文字列の連結が必要です。