angular - 隐藏加载器之前的图像加载

Question

我的角度应用程序有问题。我从服务器获取数据，包括图像，并希望在加载完所有内容后隐藏加载器动画。加载器隐藏后，图像也会被加载。

这是我隐藏加载程序的代码：

ngAfterViewInit(): void {
   this.preloader.stop();
}

数据由带有解析器的服务获取。

有谁能够帮我？

谢谢！

Answer 1

当您使用服务从服务器获取数据时，您的服务方法很可能正在返回 Observable。你需要订阅observable。

subscribe是实际执行Observable的函数。它需要三个回调参数：

订阅（成功、失败、完成）；

例如：

this.service.getDataFromServer().subscribe(
        function(response) { // executes when success
            console.log("Success" + response);
        }, 
        function(error) { // executed when failure
            console.log("Error" + error);
        }, 
        function() { // executes when completed
            console.log("Completed");
            this.preloader.stop();
        } 
    );

Answer 2

我认为你可以做的是：

您应该在 Angular 中为您的后端 API 调用下标

  this.yourAPICallService.subscribe((res)=>{
      //You should get all data from the server here
    },
    (error: any) => {
      //catch any error
      console.info(error);
    },
    ()=>{
      //codes should be executed after the completion of the API call
      this.preloader.stop();
    }
 );

Answer 3

谢谢，但这并不能解决错误。就像在路由上使用解析器来获取数据一样。现在，如果组件被渲染，所有信息都会显示，但图像会在短时间内弹出。

最好的问候