小编hzb*_*kan的帖子

Angular 4-检查是否所有页面资源都已完全加载(使加载程序旋转直到所有资源都完全加载)

我正在为我的Angular应用程序创建一个加载程序。

最常见的方法是在订阅http请求时传递boolean参数,但是我的服务的响应是一系列图像URL,因为页面上充满了图像。

因此,当重新获取URL时,加载程序停止了,但是由于连接速度慢,由于图像尚未完成加载而使用户烦恼。

我尝试使用Javascript的load事件来监听我的资源完成加载后的时间,因此我可以在那时停止加载程序,但是似乎我无法通过侦听器函数来操纵加载程序的值。

这是我尝试过的:

//the TS component 
isLoading: boolean;

ngOnInit() {
this.isLoading = true;
this.checkIfLoaded();
}

checkIfLoaded() {
  window.addEventListener("load", function (event) {
    console.log("All resources finished loading!");
    //here i should do something, either returning false or...
    //...manipulating the isLoading, but i can't access isLoading from here
  });
}


//the template
<ng-container *ngIf="isLoading">
   <app-spinner></app-spinner>
</ng-container>
Run Code Online (Sandbox Code Playgroud)

环境:Angular 4.4非常感谢您的帮助,谢谢

javascript typescript angular

6
推荐指数
2
解决办法
5221
查看次数

标签 统计

angular ×1

javascript ×1

typescript ×1