如何使用 Angular 路由器导航到 Ionic 4 中带有选项卡的页面？

Question

我刚刚使用选项卡模板使用 Ionic CLI 创建了一个 Ionic 4 应用程序。我最大的问题是如何从根登录页面（没有标签）导航到主页（有标签）并继续在底部显示标签。

我的 app-routing.module.ts，看起来像这样：

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' }
];

在我的 login.page.ts 上，我在成功登录后执行以下命令：

this.router.navigate(['tabs']);

我还在 tabs.router.module.ts 上更改了最后一个对象的 path 属性:

  {
    path: '/tabs',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }

但是，在运行时，导航到选项卡页面后，它 仅显示主页，没有任何选项卡 在应用程序底部。

Answer 1

我居然找到了解决办法：

tabs.router.module.ts 中 const 路由器 上的最后一个对象应该重定向到登录，如下所示：

  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  }

然后就是在 app-routing.module.ts:

中将 Tabs 作为 root rout

const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'login', loadChildren: './login/login.module#LoginPageModule' }
];

如何使用 Angular 路由器导航到 Ionic 4 中带有选项卡的页面？

How navigate to page with tabs in Ionic 4 using Angular Router?

ionic4

angular6