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

一般来说，并引用乔什·莫罗尼（Josh Morony）关于此事的这篇精彩文章：

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

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

一般来说，

navigateRoot

、

navigateBackward

和

navigateForward

方法在这里只是为了指导Ionic如何处理动画。因此，您可以在 Ionic 4 中使用

navigateRoot

来完成与在 Ionic 3 上使用

setRoot

相同的操作。

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

Answer 2

使用@angular/router实现您期望的行为的一种方法是使用NavigationExtras的replaceUrl和skipLocationChange在官方文档上 代码会是这样的：

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

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

Answer 3

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

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

Answer 4

您可以在不使用 Angular 的路由器的情况下设置Root。该代码适用于 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(direction: RouterDirection, animated?: boolean, animationDirection?: '前进' | '后退'): 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

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