ionic 4，页面转换由于 ngOnInit 上的 http 调用而挂起

Question

我正在用 ionic 4 构建一个应用程序。当从一个页面导航到另一个页面时，它并不是很流畅。

我正在使用 routerLink="/make-order/{{item.name}}" routerDirection="forward" 前进到下一页。在 ngOnInit 函数的这个（下一个）页面上，我进行了一些 http 调用以获取数据。问题是这对页面转换有影响。它不流畅，它会挂起直到加载数据。我该如何解决这个问题？

Answer 1

我有 2 个解决方法：第一，您可以将初始化代码移动到不同的（稍后）Angular 生命周期挂钩。 https://angular.io/guide/lifecycle-hooks#lifecycle-examples

可能 AfterView 或 AfterContent 或者使用 Ionic 的钩子：ionViewWillEnter、ionViewDidEnter、ionViewWillLeave 和 ionViewDidLeave

2nd 您可以使用延迟运算符向可观察对象添加延迟。 https://www.learnrxjs.io/operators/utility/delay.html

这应该允许在发出请求之前完成转换。

进一步研究：

我从 Ionic 文档中找到了这个

Lifecycle Events
With V4, we're now able to utilize the typical events provided by Angular. But for certain cases, you might want to have access to the events fired when a component has finished animating during it's route change. In this case, the ionViewWillEnter, ionViewDidEnter, ionViewWillLeave, and ionViewDidLeave have been ported over from V3. Use these events to coordinate actions with Ionic's own animations system.

Older events like ionViewDidLoad, ionViewCanLeave, and ionViewCanEnter have been removed, and the proper Angular alternatives should be used.

For more details, checkout the router-outlet docs

https://beta.ionicframework.com/docs/building/migration#lifecycle-events

ionic 4，页面转换由于 ngOnInit 上的 http 调用而挂起

ionic 4, page transition hangs due to http call on ngOnInit

angular

ionic4