ionic5-Code-Snippet: Fügen Sie den Tab zur TabBar unten in der APP hinzu

Autor:Neo-Yang Zeit:2020/04/18 Lesen: 5766

---

Verwendung von ionic5 und angle8.

Es gibt zwei Seiten.

Tabs-Seite: Die Seite enthält nur TabBars. Es gibt drei Registerkarten: tab1, tab2 und tab3.

Seite „Videos“: Eine neue Seite mit Videos wurde erstellt und darauf vorbereitet, sie in die TabBar einzufügen.

1. In tabs.page.html

Registerkarte hinzufügen.

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

Markieren Sie:tab=“Videos“.

2. in app-routing-modules-ts

Löschen Sie die Route der Videoseite oder kommentieren Sie sie aus.

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

3. tabs-routing-modules-ts

Fügen Sie der Videoseite eine Unterroute hinzu.

const Routen: Routen = [
   {
     Pfad: 'Tabs',
     Komponente: TabsPage,
     Kinder: [
       .........
       {
         Pfad: 'Videos',
         Kinder: [
           {
             Weg: '',
             LoadChildren: () =>
               import('../videos/videos.module').then(m => m.VideosPageModule)
           }
         ]
       },
      .........

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