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) } ] }, ......... ] }, ......... ];
继续探索
更多前沿科技洞察正等待你发现