Ionic 4使用Angular Router设置根页面

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，但我认为这不是正确的方法。我该怎么办？

- Riccardo

Answer 1

一般来说，引用Josh Morony在这个问题上的精彩文章：

在Ionic 4中使用Angular路由时，不需要定义根页面。

因为Ionic 4依赖于Angular的路由器，NavController已经改变以反映这个新的现实，在Angular应用程序中不存在像“根”路由这样的东西。你只需在路由之间转换，框架会完成其余的工作。

一般来说，方法navigateRoot、navigateBackward和navigateForward仅用于指示Ionic如何处理动画。因此，在Ionic 4中，您可以使用navigateRoot来实现与Ionic 3中使用setRoot相同的功能。

我强烈建议您阅读上述文章，它涵盖了许多关于将路由从版本3迁移到版本4的内容。

- Elvis Fernandes

---

回答正确，但提到了这些方法已被navigateForward()、navigateBack()和navigateRoot()替换。https://github.com/ionic-team/ionic/releases/tag/v4.0.0-beta.5 - Gary Klasen

Answer 2

使用@angular/router，实现您期望的行为之一是使用NavigationExtras的replaceUrl和skipLocationChange。在官方文档这里可以找到相关信息。

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

但是，在@angular/router中不存在所提到的navigateRoot，因为它只存在于ionic 3中。

- Igor

---

我认为这是一个很好的答案，因为你可以依赖Angular的路由器，但仍然像以前一样设置根。如果您使用ion-menu，则尤其重要！ - andreas

我相信这就是 OP 所需要的，应该被接受为答案。 - Cedric Ipkiss

Answer 3

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

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

- Tahseen Quraishi

---

感谢@Tahseen。唯一有效的解决办法是，如果应用程序从嵌套的路由器出口启动，则Angular路由器简单地拒绝管理缓存的Ionic出口。是的，在最基本的情况下，查看Ionic文档是值得的，稍微复杂一点-检查实际类。 - Den

Answer 4

您可以在不使用Angular的路由器的情况下设置根路径。这段代码适用于Ionic 4。

import { NavController } from '@ionic/angular';

constructor(private navCtrl: NavController) { 

}

---

navigateRoot()

navigateRoot(url: 字符串 | Url树 | 任何[], 选项?: 导航选项): 承诺;

 this.navCtrl.navigateRoot('/app/profile');

或者，如果您想要前进/后退动画：

this.navCtrl.navigateRoot('/authentication', { animationDirection: 'forward' });

使用Angular的路由器中的setDirection()

setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | 'back'): void;

在导航时使用：

this.navCtrl.setDirection('root');
this.router.navigate(['/app/profile']); 

使用navigateByUrl：

this.navCtrl.setDirection('root');
this.router.navigateByUrl('/app/profile');

或使用指令：

<a routerLink="/app/profile" routerDirection="root">Proceed</a>

- Snowbases

Answer 5

在Angular中的Iocin 5

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  ...
})
export class LoginComponent {

  constructor(private router: Router){}

  navigate(){
    this.router.navigate(['/detail'])
  }
}

- Sandy