angular - 显示加载器直到页面完全加载Angular 2+

Question

我正在为 Angular 2+ 使用 ng2-admin 主题。我正在使用 API 来获取数据。我面临的问题是加载器隐藏但数据仍未加载，因此页面首先显示页面的骨架然后加载数据。看起来很奇怪。

我希望加载器显示，直到所有数据都呈现在页面上。

首先，我认为是 API 响应的问题，但我看到 API 已经完成，只是浏览器呈现数据需要时间。对于一个想法，你可以在这个例子中看到

this.loader = ture    
ApiCall.subscribe(response =>{
    logic();
    this.loader = false;
})

加载器被隐藏，但数据仍在呈现。

感谢期待。

Answer 1

在你的主要 app.component 尝试

this.router.events.subscribe((event) => {
    if ((event) instanceof RouteConfigLoadStart) {
   //   loader =true ;
    } else if ((event) instanceof RouteConfigLoadEnd) {
    // loader=false;
    }
}); 

最好为 loader 编写一个通用服务并像这样使用它，
this.loaderService.show(); this.loaderService.hide();

Answer 2

据我所知，这里有两个解决方案。

1. 如果您有多个回调函数，并且希望在所有回调完成后获取所有数据，请使用Promise.all(iterable) 参考

2. 如果要在视图加载后通知，请使用ngAfterViewInit 参考

编辑 尝试使用此代码

this.loader = true
ApiCall.subscribe(response => {
    logic();        
    setTimeout(() => {
       this.loader = false;
    }, 0);
});

我认为这两种解决方案都会对您有所帮助。

Answer 3

你可以这样试试：

 this.loader = true;    
    ApiCall.subscribe(response =>{
        logic();
        setTimeout(() => { this.loader = false; })     
    })

所以，它只会在下一个滴答声中隐藏加载器（更改检测周期）；