web-dev-qa-db-de.com

Ionic 4 - Angular Router

derzeit entwickle ich eine anwendung mit der neuen beta version 4 von ionic und dem tabs layout.

Ich verstehe noch nicht ganz, wie die Navigation mit dem neuen Winkelrouter funktioniert

Meine app-routing.module.ts ist

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 {}

Meine tabs.router.module.ts lautet:

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 {}

mit

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

ich kann zur Übersichtsseite navigieren und kann mit einer benutzerdefinierten ID auf die Seite eventDetail zugreifen:

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

Im Moment besteht mein Problem darin, dass ich mehr als einen Parameter an die EventDetailPage übergeben muss. Ich weiß, dass dies mit der router.navigate([])-Funktion möglich ist, also habe ich es versucht

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

und

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

es wird jedoch immer ein Fehler angezeigt, wenn ich versuche, zur EventDetailsPage zu navigieren

FEHLER Fehler: Nicht erfasst (im Versprechen): Fehler: Es können keine Routen gefunden werden. URL-Segment: 'app/tabs' Fehler: Es können keine Routen zugeordnet werden. URL-Segment: "App/Tabs"

Es scheint, als habe ich nicht ganz verstanden, wie das Routing funktioniert.

Wäre schön wenn mir jemand einen Tipp geben könnte

//bearbeiten:

hier ist ein Beispiel in stackblitz . https://stackblitz.com/edit/github-ionic4navigation-emxydw

es ist möglich, zu eventDetails zu gelangen, indem Sie zum ersten Mal auf ein Element in der Liste des Startbildschirms klicken. Wenn Sie danach zurückgehen und es erneut versuchen, funktioniert es nicht mehr.

und ich kann keine Möglichkeit finden, von der create-event.page zur eventDetails.page zu navigieren. 

8
Stevetro

Hast du versucht, zu folgen?

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

weil nur die Route path: 'event/:eventId', einen Abfrageparameter unterstützt.

Vielleicht lohnt es sich, einen Blick auf diesen Artikel zu werfen, um weitere Informationen zum Winkelrouting mit Ionic zu erhalten: https://www.joshmorony.com/gebrauchen-winklig-routing-mit-ionic-4/

1
maerlin

Ich kann Ihnen sagen, dass es sich beschwert, weil es nicht versteht, welchen Weg Sie wählen sollen ...

BEARBEITEN

Ich habe gestern eine ganze Weile damit herumgespielt und ich denke, Ihr Code ist auf dem richtigen Weg. Ich denke, es hat mit der Organisation/Struktur Ihrer Routing-Module zu tun. Ich denke, Sie haben das richtige Muster am Anfang, aber Sie verlieren es in der tabs.router.module.ts. Der Grund dafür ist, dass Sie auf Komponenten verweisen, die für die Dateien event-Overview-routing.module.ts und event-detail-routing.module.ts gedacht sind.

 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
      }

Wenn Sie zu Ihrer EventDetailPage gehen möchten, müssen Sie den Pfad path: 'event/:eventId' angeben.

0
JBoothUA