web-dev-qa-db-fra.com

Ionic 4 naviguer vers les onglets

Je travaille sur un projet Ionic 4, j'ai généré un projet d'onglets.

Ce que je veux faire, c'est créer une page de connexion qui est la page par défaut.

Lorsqu'un utilisateur s'est connecté avec succès, je souhaite accéder aux onglets.

Lorsque j'essaie de le faire, j'obtiens l'erreur:

Error: Cannot match any routes. URL Segment: 'tabs'

Voici mes itinéraires:

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
];

Dans ma page de connexion, j'ai un bouton comme suit:

<ion-button expand="block" [href]="'tabs'" color="light" fill="outline">Sign in</ion-button>

Lorsque je génère une page différente, je peux accéder à cette page de la même manière.

ionic4ionic-tabs
8
Robin.v

J'étais confronté au même problème. J'ai trouvé une solution ici . Vous devez ajouter un itinéraire supplémentaire à votre tableau d'itinéraires.

const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'Login', loadChildren: './login/login.module#LoginPageModule' },
  { path: 'tabs', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
9
Rich Tillis

Étape 1: ajouter un itinéraire supplémentaire à la page des onglets dans votre application-routing.module.ts

{ path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule' }

Étape 2: ajouter la route des onglets à l'intérieur du tabs-routing.module.ts

 const routes: Routes =[
   {
     path:'tabs',
     component:TabsPage,
     children:[
       {
         path : 'home',
         outlet : 'home',
         component : HomePage
       },
       {
         path : 'me',
         outlet : 'me',
         component : MePage
       }
     ]
   }
 ];

Étape 3: Lien vers la page des onglets

 <ion-button href="app/tabs/(home:home)" routerDirection='root'>Tabs</ion-button>
0
Athul Raj

J'ai fait face au même problème. Ma première page est la page "Connexion" par défaut. Je voulais accéder au module d'onglets après avoir cliqué sur le bouton.

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
   { path: 'app', loadChildren: './tabs/tabs.module#TabsPageModule' },
   { path: '', loadChildren: './sign-in/sign-in.module#SignInPageModule' },
  { path: 'search', loadChildren: './search/search.module#SearchPageModule' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

tabs.router.module.ts:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home/home.module#HomePageModule'
          }
        ]
      },
      {
        path: 'my-requests',
        children: [
          {
            path: '',
            loadChildren: '../my-requests/my-requests.module#MyRequestPageModule'
          }
        ]
      },
      {
        path: 'add-request',
        children: [
          {
            path: '',
            loadChildren: '../add-request/add-request.module#AddRequestPageModule'
          }
        ]
      },
      {
        path: 'search',
        children: [
          {
            path: '',
            loadChildren: '../search/search.module#SearchPageModule'
          }
        ]
      },
      {
        path: 'profile',
        children: [
          {
            path: '',
            loadChildren: '../profile/profile.module#ProfilePageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

sign-in.module.ts:

....

const routes: Routes = [
  {
    path: "",
    component: SignInPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [SignInPage]
})

....

sign-in.page.html:

 <ion-button (click)="navigateToProfile()">Sign In</ion-button>

sign-in.page.ts:

navigateToProfile(){
  this.navController.navigateRoot(`app/tabs/home`);
  }

Dans l'ensemble, ma solution était:

  • ajouter un autre chemin: "app" dans mon module racine app-routing.module
  • navigation vers root avec route avec NavController. Voir ici pour plus de détails, je l'ai trouvé ici.
0
Nodirabegimxonoyim