ionic5程式碼片段：增加APP底部TabBar的Tab

作者：neo yang 時間：2020/04/18 讀： 5787

---

使用ionic5和angular8。

有兩個頁面。

Tabs頁面：頁面中只有TabBar。已有tab1、tab2、tab3三個tab。

Videos頁面：新建了一個videos頁面，準備把它放進TabBar。

1、tabs.page.html中

增加tab。

<ion-tabs>
  <ion-tab-bar slot="bottom"> 
    ...
    <ion-tab-button tab="videos">
    <ion-icon name="videocam"></ion-icon>
    影片
    </ion-tab-button>
    ...
  </ion-tab-bar>
</ion-tabs>

重點：tab=”videos”。

2、app-routing-modules-ts中

刪掉或註解掉videos頁面的路由。

const routes: Routes = [
   ...
   /*{ path: 'videos', loadChildren: () => import('./videos/videos.module').then( m => m.VideosPageModule) },*/
   ...
 ];

3、tabs-routing-modules-ts中

增加videos頁面頁面的子路由。

const routes: Routes = [
   {
     path: 'tabs',
     component: TabsPage,
     children: [
       .........
       {
         path: 'videos',
         children: [
           {
             path: '',
             loadChildren: () =>
               import('../videos/videos.module').then(m => m.VideosPageModule)
           }
         ]
       },
      .........

     ]
   },
   .........
 ];