带有角度路由器的 Ionic 4 setRoot

Posted 2023-03-13

【中文标题】带有角度路由器的 Ionic 4 setRoot

【英文标题】：Ionic 4 setRoot with Angular Router

【发布时间】：2019-01-12 01:03:21

【问题描述】：

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

【参考方案1】：

一般来说，并引用this awesome article on this matter by Josh Morony：

在带有 Angular 路由的 Ionic 4 中，没有要定义的根页面。

因为 Ionic 4 依赖于 Angular 的路由，所以 NavController 已更改以反映这一新现实，对于 Angular 应用程序来说，没有像“根”路由这样的东西。您只需在路由之间进行转换，其余的工作由框架完成。

一般来说，navigateRoot、navigateBackward 和 navigateForward 方法在这里只是为了指导 Ionic 如何处理动画。因此，您可以在 Ionic 4 中使用 navigateRoot 来完成与在 Ionic 3 中使用 setRoot 相同的操作。

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

【讨论】：

正确答案，但很高兴提到这些方法已被 navigateForward()、navigateBack()、navigateRoot() github.com/ionic-team/ionic/releases/tag/v4.0.0-beta.5 取代

【参考方案2】：

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

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

【讨论】：

感谢@Tahseen。如果应用程序从嵌套路由器出口启动，则唯一可行的解​​决方案。 Angular 路由只是拒绝管理缓存的离子出口。是的，在最基本的情况下，离子文档值得一看，不仅仅是基本的 - 检查实际的类。

【参考方案3】：

使用@angular/router 实现您期望的行为的一种方法是使用NavigationExtras here on official docs 的replaceUrl 和skipLocationChange 代码是这样的：

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

但是是的，@angular/router 上不存在引用的 navigateRoot，因为它在 ionic 3 上

【讨论】：

我认为这是一个很好的答案，因为您可以依赖 Angular 的路由器但仍然像以前一样设置根。如果您使用离子菜单，这一点尤其重要！

我相信这是 OP 需要并且应该被接受的答案

【参考方案4】：

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

import  NavController  from '@ionic/angular';

constructor(private navCtrl: NavController)  

---

navigateRoot()

navigateRoot(url: string | UrlTree | any[], options?: NavigationOptions): 承诺;

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

或者如果你想要forward/back动画：

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

---

setDirection() 与 Angular 的路由器

setDirection(direction: RouterDirection, animated?: boolean, animationDirection?: 'forward' | '返回'): 无效;

使用导航：

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>

【参考方案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'])