Question

我目前正在尝试将旧版离子应用更新为v4，但似乎找不到与此导航等效的v4

     return this.app.getRootNav().setPages([
         {page: Profile},
         {page: SettingsPage, params: {id: userId}}
     ])

Answer 1

Ionic4和您的请求的角度版本如下：

   this.router
  .navigate(["/page1"], { replaceUrl: true })
  .then(() => this.router.navigate(["/page2"]));

据我了解，逻辑在这里。将page1推入历史记录，但导航至page2，因此，如果用户按“后退”按钮，它将重定向到page1。这是stackblitz示例。

Answer 2

很抱歉，我读到您的问题为时已晚（仅在今天），但为了能够找到最佳答案，我建议您看看Ionic 4 Routes，以找到最适合您的解决方案，因为我还没有足够的解决方案是时候深入了解最佳解决方案了，那么我将尝试描述我认为应该如何实现，然后您寻求最佳解决方案：

如果我有您的问题，那么您所需要的就是利用称为“路线”的新的离子导航控制方法

当您需要指定导航堆栈的顺序来保存以下内容时订购Profile-> SettingPage，使设置页面位于顶部，然后您可以导航回Profile，而不是像这样：

return this.app.getRootNav().setPages([
    {page: Profile},
    {page: SettingsPage, params: {id: userId}}
])

您可以简单地：

通过使用类似这样的东西（假设SettingsPage路由路径为“ settings”），将具有所需参数的页面SettingsPage显示为根页面：

在您的app-routing.module.ts内部：

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
    { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
    { path: 'settings/:id', loadChildren: './pages/settings/settings.module#SettingsPageModule' }
];

，您应该导航到SettingsPage的按钮应该是这样的（注意routerDirection =“ root”会将您的页面显示为根页面，这将有助于您利用默认Href的另一个属性）：

<ion-button expand="block" [routerLink]="['/settings/', userId]" routerDirection="root"> ...

在/ settings页面上，您可以返回到您的个人资料页面，可以使用“ defaultHref”属性，该属性将在堆栈中不存在其他内容时定义导航堆栈中的上一页（这是有保证的，因为我们将页面设置为根网页）。此后退按钮应如下所示：

<ion-toolbar color="primary">
    <ion-buttons slot="start">
        <ion-back-button defaultHref="/profile"></ion-back-button>
    </ion-buttons>
    <ion-title>Profile</ion-title>
</ion-toolbar>

您会注意到在路线上您认为它是相反的方式（您首先将自己置于所需页面中，然后定义了向后导航时应显示的默认页面。

我不知道这是否正是您所需要的，但至少我已经从您的问题中了解到了，那是解决问题的“途径”。

Answer 3

如果我正确理解了您的问题，则需要创建路由数组并将其传递给routermodule。我通常会创建一个单独的路由模块，如下所示：

const routes: Routes = [
    {
        path:'',
        redirectTo: 'home',
        pathMatch: 'full',
     },
     {
       path'home',
       component: HomePage
     }


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

我相信对于离子4，您可以使用与主要角度站点上列出的完全相同的路由技术：https://angular.io/tutorial/toh-pt5

带角6的离子4路由

3 个答案: