如何強制重新創建<img /> src什么時候改變？

Question

我有一個像這樣的 Angular 組件：

import { Component, Input } from '@angular/core';

@Component({
  selector: 'picture',
  templateUrl: './picture.html',
})
export class Picture {
  @Input() pictureUrl: string;
}

<img src="{{pictureUrl}}" />

問題是，當pictureUrl輸入屬性改變時，Angular只是改變了<img />的src屬性，所以瀏覽器會顯示上一張圖片，直到加載新圖片。 所需的行為是在加載新圖片時不顯示任何內容或逐步繪制新圖片，而不是顯示陳舊圖片。 通常通過改變圖片URL時重新創建<img /> DOM元素來解決。

所以問題是：如何在src屬性更改時強制 Angular 8 重新創建/重新掛載<img />元素？ 或者如何在 Angular 中解決所描述的問題？

為了澄清這個問題：如果我使用 React，我會通過將key={pictureUrl}添加到<img />來解決它。

Answer 1

您可以將load事件綁定到圖像

<img (load)="HideLoader()" />

加載圖像后將觸發 load 事件。 您可以在更改圖像 src 后使用疊加層顯示加載圖標，並在加載圖像后隱藏加載器，即load事件被觸發時。

您可以通過編寫自己的 setter 來檢測輸入屬性的變化

@Input() set thePictureURL(url: string) {
    //show loader
    this.pictureUrl = url;
}