Ionic 5：如何导航到孩子和子孩子答案

【问题标题】：Ionic 5 : How to navigate to the child and to the sub-childIonic 5：如何导航到孩子和子孩子
【发布时间】：2020-07-29 00:54:07
【问题描述】：

我尝试将使用 ionic 3 编写的应用迁移到 ionic 5。这是一场噩梦！在我的应用程序中，我有以下情况：

当我触摸右上角的按钮时显示 2 个箭头，这是执行 router.navigate() Page1 与他的后退按钮一起出现。但是当我触摸 Page1 的右上角按钮时，router.navigate() 从 Page1 执行，Page2 出现没有后退按钮。在 Page1 和 Page2 我使用 <ion-back-button></ion-back-button> 我不知道如何显示 Page2 上的后退按钮。我认为Routes配置有问题，但我不知道如何解决它...... 我使用 ionic CLI 从头开始创建了一个新应用程序：

> ionic start tabs myApp

我添加了 2 页：

> ionic generate page Page1

Page2 也是如此。

app-routing.module.ts ：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then( m => m.Page1PageModule)
  },

  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
  }
];

page1-routing.module.ts ：

const routes: Routes = [
  {
    path: '',
    component: Page1
  }
];

谢谢。

【问题讨论】：

您能否显示您的路线定义以及您对router.navigate()的调用？
模板头也可以。

标签： ionic-framework angular-ui-router angular8 ionic5

【解决方案1】：

我解决了我的问题：

我将 Page2 路由从 app-routing.module.ts 移动到 page1-routing.module.ts 在 page1.page.ts 我从 Page1 调用 Page2 ：

this.router.navigate(['Page1', 'Page2']

app-routing.module.ts ：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'page1',
    loadChildren: () => import('./page1/page1.module').then( m => m.Page1PageModule)
  }
];

page1-routing.module.ts ：

const routes: Routes = [
  {
    path: '',
    component: Page1
  },
  {
    path: 'page2',
    loadChildren: () => import('./page2/page2.module').then( m => m.Page2PageModule)
  }
];

后退按钮出现并且工作正常。

【讨论】：