如何使用Angular Router导航到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']);

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

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

但是，在运行时，导航到“标签页”后，它仅在应用程序底部显示没有任何标签的主页。

Answer 1

我实际上找到了解决方法：

tabs.router.module.ts中 const路由器上的最后一个对象应重定向到登录，就像这样：

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

然后将标签作为根路由保留在app-routing.module.ts中：

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