登录

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

作者:neo yang 时间:2020/04/18 读: 5166
使用ionic5和angular8。 有两个页面。 Tabs页面:页面中只有TabBar。已有tab1、tab […]

使用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)
}
]
},
.........

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



copyright © www.lyustu.com all rights reserve.
Theme: TheMoon V3.0. Author:neo yang