Bonjour,

Je suis en train de travailler sur une application Ionic, que j'ai généré avec Ionic CLI mais sans y intégrer directement les Tabs. J'ai créé plusieurs component (login, signup etc...) et j'ai par la suite, voulu intégrer les Tabs de Ionic.

Cela est fonctionnel, cependant, seules les pages présentes dans tabs.router.module.ts ont les Tabs d'intégré en bas de page. Toutes mes autres routes quant à elles, sont initialisées dans le app-routing.module.ts. Existe t-il un moyen de faire en sorte que les Tabs soient affichées dans l'ensemble de l'application ?

tabs.router.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home-page/tab1.module#HomePageModule'
          }
        ]
      },
      {
        path: 'game/new',
        children: [
          {
            path: '',
            loadChildren: '../game/create-game-page/tab2.module#CreateGamePageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

De plus, j'ai pu remarqué un petit soucis au niveau des Tabs en elles-même. Celles ci fonctionnent, mais lorsque je clique sur la "Tab Two", je me retrouve sur cette page, l'icône n'est pas "highlight" alors que celle de la "Tab One" fonctionne bien.

Tab One sélectionnée : http://www.noelshack.com/2019-05-6-1549062619-capture.png

Tab Two sélectionnée : http://www.noelshack.com/2019-05-6-1549062619-capture2.png

tab1.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([{ path: '', component: HomePageComponent }])
  ],
  declarations: [HomePageComponent]
})
export class HomePageModule {}

tab2.module.ts

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CreateGamePageComponent } from './create-game-page.component';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    RouterModule.forChild([{ path: '', component: CreateGamePageComponent }])
  ],
  declarations: [CreateGamePageComponent]
})
export class CreateGamePageModule {}

Dernier petit soucis

J'ai normalement un header que je cherche dans le app.component.html, comme ceci :

<ion-app>
  <app-header></app-header>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

Cependant comme vous pouvez le voir sur les screens, soit celui-ci est totalement caché, soit il l'est partiellement.

Je pense ne pas avoir totalement compris comment fonctionnaient les Tabs de Ionic, et je fais donc appel à vos lumières afin de m'éclaircir sur les points évoqués précédemment si vous le pouvez

Je vous remercie d'avance et vous souhaite une bonne nuit !

Hello,

Je rencontre également le même problème, je souhaiterai avoir mon ion-tab dans toute l'application mais la barre est disponible uniquement dans les page router dans les tabs

Une idée ?