开发
Future Signals 科技趋势深度洞察

ionic5代码片段:增加APP底部TabBar的Tab

Ionic5+Angular8实战教程:如何为APP底部TabBar动态添加新的Tab页面,包含完整的路由配置和页面集成步骤

发布时间

预计阅读

1 分钟

使用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-label>视频</ion-label>    </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)           }         ]       },      .........     ]   },   ......... ];

继续探索

更多前沿科技洞察正等待你发现

← 返回博客列表