1

angularバージョン9を使用しています.2つのコンポーネントがあります。1 で車種、型式、2 番目のコンポーネントを検索し、コンポーネント 1 で選択した車の詳細を読み込みます。コンポーネント 1 で選択した車の車の画像リンクをコンポーネント 2 に渡し、その画像をコンポーネント2.これはうまくいきます..

アプリケーションで別のページを参照し、再度コンポーネント 1 に移動して別の車を選択し、コンポーネント 2 に移動すると、以前に選択した車の画像が約 1 ～ 2 秒間表示され、その後新しい画像が表示されます。これは、ブラウザのキャッシュの問題のようです。新しいイメージの読み込みが完了するまで最初にローダー イメージを読み込んでから、新しく読み込んだイメージを表示しようとしましたが、うまくいきません。私が試したことは以下の通りです。

<img *ngIf="isLoading" [src]="loadingimage.png" />
<img [hidden]="isLoading" [src]="carModelImage" (load)="isLoading = false"/>

私が気付いたのは、コンポーネント 2 が開かれた瞬間(load)にタグのイベントがimg発生し、新しいものが読み込まれるのを待たなくても isLoading 値が false に変更されるcarModelImageため、前の画像がしばらく表示されることです。

私のコンポーネントコードは以下のようになります。

@Component({
selector: 'app-request-summary',
templateUrl: './request-summary.component.html',
styleUrls: ['./request-summary.component.scss']
})

export class RequestSummaryComponent implements OnInit, OnDestroy {
    public carModelImage: string = '';
    public isLoading: boolean = true;

   constructor() {
     this.carModelImage = '';
     this.isLoading = true;
   }


   ngOnInit() {
   this.requestSummaryService.carData
    .pipe(takeUntil(this.ngUnsubscribe))
    .subscribe((data) => {
      this.carModelImage = data[0].carModelImage ? data[0].carModelImage 
      :'http://nocarimage.png';
    }
   }

   ngOnDestroy() {
     this.isLoading = true;
     this.carModelImage = '';
     this.ngUnsubscribe.next();
     this.ngUnsubscribe.complete();
   }
}

私はかなり長い間、この問題のために苦労しています。どんな助けでも大歓迎です。

4

2 に答える 2

1

ここで詳しく説明する必要はありませんが、簡単なパターンを紹介します。

画像が表示されなくなったら、nullそれを消してください。

たとえば、コードのどこかにおそらく次のように記述します。

carModelImage = "your-image";

これがもう必要ないと確信したらvar、nullそれを外します。

carModelImage = null;

問題に固有のヘルプが必要な場合は、さらにコードを投稿してください。

于 2020-08-04T12:47:38.857 に答える