web-dev-qa-db-fra.com

Ionic 4 - routeur angulaire

je développe actuellement une application avec la nouvelle version 4 bêta d'ionic et la disposition des onglets.

Je ne comprends pas encore comment fonctionne la navigation avec le nouveau routeur angulaire

Mon app-routage.module.ts est

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

const routes: Routes = [
  { path: 'welcome', loadChildren: './pages/welcome/welcome.module#WelcomePageModule' },
  { path: 'login', loadChildren: './pages/auth/login/login.module#LoginPageModule' },
  { path: 'registration', loadChildren: './pages/auth/registration/registration.module#RegistrationPageModule' },
  { path: 'app', loadChildren: './pages/tabs/tabs.module#TabsPageModule'},
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Mon tabs.router.module.ts est:

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

import { TabsPage } from './tabs.page';
import { ContactPage } from '../contact/contact.page';
import { EventOverviewPage } from '../event-overview/event-overview.page';
import { EventDetailPage } from '../event-detail/event-detail.page';
import { ProfilPage } from '../profil/profil.page'


const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        path: 'event/:eventId',
        component: EventDetailPage,
        outlet: 'eventOverview'
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      }
    ]
  }
];

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

avec

router.navigateByUrl('/app/tabs/(eventOverview:eventOverview)')

je suis capable de naviguer vers la page de présentation et je peux accéder à la page eventDetail avec un identifiant personnalisé avec:

this.router.navigateByUrl('app/tabs/(eventOverview:event/${id})')

Pour le moment, le problème est que je dois passer plus d'un paramètre à EventDetailPage. Je rouge que cela est possible avec la fonction router.navigate([]), donc j'ai essayé

this.router.navigate(['/app/tabs/eventOverview'], { queryParams: { eventId: eventId} });

et

this.router.navigate(['/app/tabs/(eventOverview:event)'], { queryParams: { eventId: eventId} });

mais il y a toujours une erreur quand j'essaie de naviguer dans EventDetailsPage

ERREUR Erreur: Non capturé (promis): Erreur: Impossible de faire correspondre les routes . Segment URL: 'app/tabs' Erreur: Impossible de faire correspondre les itinéraires. Segment URL: 'app/tabs'

Il semble que je n’ai pas complètement compris le fonctionnement du routage.

Serait gentil si quelqu'un pouvait me donner un indice

//modifier:

voici un exemple dans stackblitz . https://stackblitz.com/edit/github-ionic4navigation-emxydw

il est possible d'aller à eventDetails en cliquant la première fois qu'un élément de la liste de l'écran de démarrage est sélectionné. Si vous revenez après et essayez à nouveau, cela ne fonctionne plus.

et je ne peux pas trouver un moyen de naviguer de la page create-event.page vers la page eventDetails.page. 

angulartypescriptionic-frameworkangular-ui-router
8
Stevetro

Avez-vous essayé de suivre?

this.router.navigate(['/app/pages/tabs/event', { eventId: eventId}]);

car seule la route path: 'event/:eventId', prend en charge un paramètre de requête.

Peut-être que cela vaut la peine de jeter un coup d'œil à cet article, pour plus d'informations sur le routage angulaire avec ionic: https://www.joshmorony.com/using-angular-routing-with-ionic-4/

1
maerlin

Je peux vous dire qu'il se plaint parce qu'il ne comprend pas quelle route choisir ...

MODIFIER

J'ai joué avec ça pendant un moment la nuit dernière et je pense que votre code est sur la bonne voie .. Je pense que cela a à voir avec l'organisation/la structure de vos modules de routage .. Je pense que vous avez le bon schéma en commençant mais vous le perdez dans le tabs.router.module.ts. La raison en est que vous le faites référencer des composants destinés aux fichiers event-overview-routing.module.ts et event-detail-routing.module.ts.

 children: [
      {
        path: 'eventOverview',
        outlet: 'eventOverview',
        component: EventOverviewPage,
      },
      {
        //path: 'event/:eventId',
        path: 'eventOverview/eventDetails',
        outlet: 'eventOverview',
        component: EventDetailPage,
        children: [
          {
            path: ':id',
            component: EventDetailPage
          },
           {
            path: ':id/:Status',
            component: EventDetailPage
          }
        ]
      },
      {
        path: 'profil',
        outlet: 'profil',
        component: ProfilPage
      }

Si vous voulez aller à votre EventDetailPage, vous devez faire correspondre le chemin path: 'event/:eventId'

0
JBoothUA