Question

我无法使用Tabs Starter项目在其他路线上显示标签。我开始了一个新的标签项目：

ionic start "tabs-example" tabs --type=angular

并运行它，选项卡会立即工作。我创建了一个名为home的新页面（使用ionic generate page），我希望它成为我通过更新以下路由而工作的根页面。

我将app-routing.module.ts调整为如下形式：

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  { path: 'home/tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];

在投放应用程序时，我看到的home.page.html内容很简单：

<ion-content padding>
  <a href="/home/tabs">tabs</a>
</ion-content>

当我单击锚点链接时，URL会更改，但只是变成白屏，控制台中没有错误。

我对tabs.router.module.ts所做的唯一更改是更新了我猜我做错的URL，但似乎无法弄清问题。

const routes: Routes = [
  {
    path: 'home/tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '/home/tabs',
    redirectTo: '/home/tabs/tab1',
    pathMatch: 'full'
  }
];

Answer 1

使用路由器链接而不是href进行引用

<a routerLink="tabs">Tabs</a>

在root以外的地方使用Ionic 4标签

1 个答案: