显示加载器直到页面完全加载角度2+

Question

我使用ng2-admin主题的角度2+。我正在使用API来获取数据。我面临的问题是，加载器隐藏了，但数据仍然没有加载，所以页面首先显示页面的骨架，然后加载数据。看起来很奇怪。

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

首先，我认为这是API响应的问题，但我看到API已经完成了，只是浏览器渲染数据需要时间。对于一个想法，您可以在下面的示例中看到

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

加载器隐藏了，但数据仍在渲染。

感谢大家的期待。

Answer 1

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

如果您有多个回调函数，并希望在所有回调完成后获取所有数据，请使用要在视图加载后通知的Reference

1. ，请使用Promise.all(iterable) ngAfterViewInit

编辑尝试使用此代码

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

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

Answer 2

你能这样试一下吗：

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

因此，它只会在下一个节拍(更改检测周期)中隐藏加载程序；

Answer 3

在您的主app.component中尝试

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

最好为加载器编写一个公共服务，并像这样使用它，

this.loaderService.show(); this.loaderService.hide();