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

Posted 2023-03-16

【中文标题】Ionic 5：如何导航到孩子和子孩子

【英文标题】：Ionic 5 : How to navigate to the child and to the sub-child

【发布时间】：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()的调用？

模板头也可以。

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

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