离子4 setRoot与角度路由器

Question

我正在将我的Ionic 3项目升级到最新的Ionic 4,我在路由方面遇到了一些麻烦.在Ionic 3中我使用setRoot就像这样:

handler: () => navCtrl.parent.parent.setRoot(HomePage, 'logout', {animate: true})

Ionic 4的最新navCtrl只有goBack,goForward和goRoot,我不明白如何使用parent.我在Angular中找到了ActivatedRoute,但我不认为这是正确的方法.我能怎么做？

Answer 1

一般来说,引用Josh Morony关于此事的这篇精彩文章:

在具有Angular路由的Ionic 4中,没有要定义的根页面.

因为Ionic 4依赖于Angular的路由器,所以NavController已经改变以反映这种新的现实,而对于Angular应用程序,没有像"root"路由这样的东西.您只需在路径之间进行转换,框架就会完成其余的工作.

一般来说,方法navigateRoot,navigateBackward并navigateForward只在这里指导离子对如何处理动画.因此,您可以navigateRoot在Ionic 4中使用setRootIonic 3中的相同功能.

我强烈建议您阅读上述文章,它涵盖了将路由从Ionic版本3迁移到版本4时需要了解的许多内容.

Answer 2

使用@ angular / router来实现您期望的行为的一种方法是使用官方文档上的NavigationExtras的replaceUrl和skipLocationChange， 代码如下所示：

this.router.navigate([pageLink], {replaceUrl: true})

但是，是的，所引用的navigationRoot在@ angular / router上不存在，就像在ionic 3上一样

Answer 3

要使您的页面设置为 Ionic 4 中的根页面，您应该使用navigateRoot而不是setRoot

this.navCtrl.navigateRoot('/pageName');