ionic5 コード スニペット: APP の下部にある TabBar にタブを追加します。

ionic5 と angular8 を使用します。

ページは 2 つあります。

タブ ページ: ページには TabBar のみがあります。 tab1、tab2、tab3 の 3 つのタブがあります。

ビデオ ページ: 新しいビデオ ページを作成し、TabBar に配置する準備をしました。

1. tabs.page.html内

タブを追加します。

<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=”ビデオ”。

2. app-routing-modules-ts 内

動画ページのルートを削除またはコメントアウトします。

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

3. タブ-ルーティング-モジュール-ts

動画ページにサブルートを追加します。

const ルート: ルート = [
   {
     パス: 'タブ'、
     コンポーネント: TabsPage、
     子供たち： [
       .........
       {
         パス: 'ビデオ',
         子供たち： [
           {
             パス： ''、
             ロードチャイルド: () =>
               import('../videos/videos.module').then(m => m.VideosPageModule)
           }
         ]
       },
      .........

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