带角度 6 的 Ionic 4 路由

Question

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

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

Answer 1

您的请求的 Ionic4 和 Angular 版本是这样的：

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

据我所知，逻辑就在这里。将 page1 推送到历史记录但导航到 page2，因此如果用户按下后退按钮，它将重定向到 page1。 这是stackblitz 示例。

Answer 2

抱歉，我阅读您的问题太晚了（就在今天），但为了能够找到您问题的最佳答案，我建议您查看 Ionic 4 Routes 以找到最适合您的解决方案，因为我没有足够的是时候更深入地找到最佳解决方案了，然后我将尝试描述我认为应该如何实现它，然后您寻求最佳方法来做到这一点：

如果我得到您的问题，那么您所需要的就是受益于称为“路线”的新 Ionic 导航控制方法

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

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

你可以简单地：

使用类似这样的方法将您的页面 SettingsPage 与所需参数显示为根页面（假设 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" 会将您的页面显示为根页面，这将帮助您受益于另一个属性，即 defaultHref）：

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

在您的 /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

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

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


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

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