我正在为我的 Angular 应用程序创建加载器。
最常见的方法是在订阅 http 请求时传递 bool 参数,但我的服务的响应是一系列图片 URL,因为页面中全是图片。
因此,当检索到 URL 时,加载程序会停止,但由于连接速度较慢,用户会因为图像尚未完成加载而感到恼火。
我曾尝试使用 Javascript 的加载事件来监听我的资源何时完成加载,以便我可以在那时停止加载器,但似乎我无法从监听器函数中操作加载器的值。
这是我尝试过的:
//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>
环境:Angular 4.4 非常感谢任何帮助,谢谢
最佳答案
只需让您的组件实现 AfterViewInit
并在 ngAfterViewInit()
中将 isLoading
设置为 false
。
class YourComponent implements AfterViewInit {
// ...
ngAfterViewInit() {
this.isLoading = false;
}
}
无需附加额外的事件处理程序,angular 完全覆盖了它的生命周期回调。
关于javascript - Angular 4 - 检查是否所有页面资源都已完全加载(使加载器旋转直到所有资源都已完全加载),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50345082/