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

4

5 回答 5

26

一般来说，并引用Josh Morony 的这篇很棒的文章：

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

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

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

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

于 2018-08-09T02:31:55.073 回答
19

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

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

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

于 2019-05-24T14:13:54.433 回答
6

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

this.navCtrl.navigateRoot('/pageName');
于 2019-02-13T06:52:13.643 回答
3

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

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

constructor(private navCtrl: NavController) { 

}

导航根（）

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

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

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

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

setDirection() 与 Angular 的路由器

setDirection（方向：RouterDirection，动画？：布尔，animationDirection ？： “前进”|“后退”）：无效；

导航：

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>
于 2019-06-13T07:32:30.330 回答
0

在带有 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'])
  }
}

于 2021-08-03T18:31:42.080 回答