无法从 page1 导航到 page2，ionic v5

Question

我正在尝试将我的应用程序从离子 v3 迁移到 v5 并面临以下导航问题。提前感谢您的帮助。

从 NavComponent 导航到 WhyJoinPage 时，WhyJoinPage 的 constructor()、ngOnInit() 方法正在执行，API 也在获取数据并注入它到实例变量。

但是不显示WhyJoinPage，只显示NavComponent。所以导航没有发生。

我试过angular路由，

this.router.navigate(['/whyjoinpage'], {state: {item: moreOptions }});

并且还尝试了 NavController 的 navigateForward 方法。

let navigationExtras: NavigationExtras = {
      queryParams: {item: JSON.stringify(moreOptions) }
  };
this.navCtrl.navigateForward(['/whyjoinpage'],  navigationExtras);

但这两个选项都没有显示 WhyJoinPage。

WhyJoingPage 的构造函数被执行并且能够看到来自 NavComponent 的数据

if (this.router.getCurrentNavigation().extras.state) {
          const state = this.router.getCurrentNavigation().extras.state;
          this.whyJoinOption = state.item;
        }

在控制台中我没有看到任何错误，ionic build 也没有给出任何错误。

我的自定义模块路由文件如下所示

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

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})

export class CustomAppProviderRoutingModule {}

我的App模块文件如下。

const routes: Routes = [
    {
    path:'dashboard',
    component :DashboardPage
  },
  {
    path: '',
    redirectTo: 'dashboard',
    pathMatch: 'full'
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { enableTracing: true,  preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Answer 1

您需要具有特定路径的路由模块
在第一页上创建 link 与路由器链接到其他页面
如果您想将一些数据从第一页传递到其他页，请将 navigationExtras 参数与路由器一起使用 link
需要有activatedRoute订阅导航的状态才能在当前页面获取上一页传过来的数据

更多请关注：https://ionicframework.com/blog/navigating-the-change-with-ionic-4-and-angular-router/

无法从 page1 导航到 page2，ionic v5

Unable to navigate from page1 to page2, ionic v5

ionic4

ionic5