1

我正在使用角度版本 9。我有 2 个组件。1 搜索汽车制造商、型号和第二个组件以加载从组件 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 回答
1

你如何分配 carmodelImage 变量。carmodelImage 负责显示以前的图像，如果你可以在销毁时取消它可能会有所帮助

假设您说正在调用 ngondestroy

于 2020-08-04T13:13:20.907 回答