Ionic 4 setRoot 与 Angular 路由器

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

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

In Ionic 4 with Angular routing, there is no root page to be defined.

因为 Ionic 4 依赖于 Angular 的路由器，NavController 已经被改变以反映这个新的现实，并且对于 Angular 应用程序没有这样的东西 "root" 路线。您只需在路由之间转换，剩下的工作由框架完成。

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

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

Answer 2

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

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

Answer 3

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

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

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

上

Answer 4

不使用angular的路由器也可以设置Root。此代码适用于 Ionic 4

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

constructor(private navCtrl: NavController) { 

}

navigateRoot()

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

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

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

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

setDirection() 与 angular 的路由器

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>

Answer 5

在 Iocin 5 中 Angular

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

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

  constructor(private router: Router){}

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

Ionic 4 setRoot 与 Angular 路由器

Ionic 4 setRoot with Angular Router

angular

typescript

ionic-framework

ionic4

navigateRoot()

setDirection() 与 angular 的路由器