Ionic5 / Angular9: navController.navigateForward не работает (ошибка: невозможно сопоставить ни один маршрут.) - PullRequest
Новая
       11

Ionic5 / Angular9: navController.navigateForward не работает (ошибка: невозможно сопоставить ни один маршрут.)

0 голосов
/ 12 апреля 2020

Я новичок в Ionic 5 и пытаюсь использовать Angular 9 отложенную загрузку с navController.navigateForward, но это не работает.

Я не знаю, относится ли это к тому, как я настраиваю роутеры или что. И я нигде не смог найти официальную информацию о navigateForward.

Когда я нажимаю "go to details" (ниже), я получаю ошибку Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details/'

Это TabsPage:

enter image description here

tabs-routing.module.ts router: 

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: '',
        redirectTo: 'films',
        pathMatch: 'full'
      },
      {
        path: 'films',
        children: [
          {
            path: '',
            loadChildren: () => import('../films/films.module').then(m => m.FilmsPageModule),
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'people',
        children: [
          {
            path: '',
            loadChildren: () => import('../people/people.module').then(m => m.PeoplePageModule),
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'planets',
        children: [
          {
            path: '',
            loadChildren: () => import('../planets/planets.module').then(m => m.PlanetsPageModule),
            pathMatch: 'full'
          }
        ]
      }
    ]
  }
];

films.page. html: 

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Films</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button expand="full" (click)="openDetails()">Go to Details</ion-button>
  <ion-button expand="full" (click)="goToPlanets()">Switch to Planets</ion-button>
</ion-content>

films.page.ts: 

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from '@ionic/angular';

@Component({
  selector: 'app-films',
  templateUrl: './films.page.html',
  styleUrls: ['./films.page.scss'],
  providers: [NavController, NavParams]
})
export class FilmsPage implements OnInit {

  constructor(public navCtrl: NavController, public navParams: NavParams) { }

  ngOnInit() {
  }

  openDetails() {
    // original code adapted to ionic 5
    // this.navCtrl.push('FilmDetailsPage');

    this.navCtrl.navigateForward('/details/'); // not working !!
  }

  goToPlanets() {
    // original code adapted to ionic 5
    // this.navCtrl.parent.select(2);

    this.navCtrl.navigateRoot('/tabs/planets'); // working fine
  }

}

пленок- Router.module.ts router: 

const routes: Routes = [
  {path: '', component: FilmsPage, children: [

    // if I don't comment this, I get an error
    // {path: '', redirectTo: 'details'},

    {path:'details', children: [
        {
          path: '', loadChildren: ()=> import('../film-details/film-details.module').then(m => m.FilmDetailsPageModule), pathMatch: 'full'
        }
      ]
    }
  ]}
];

film-details.page. html: 

<ion-header>
  <ion-toolbar>
    <ion-title>filmDetails</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>

</ion-content>

1 Ответ

0 голосов
/ 28 апреля 2020

Я сделал то же самое со страницей сведений, но мы сделали это с переменной id. Ваш случай должен быть таким: 

const routes: Routes = [
{
    path: '', 
    component: FilmsPage
},
{
    path: 'details',
    children: [
    {
       path: '', 
       loadChildren: () => 
       import('../film-details/film-details.module')
           .then(m => m.FilmDetailsPageModule), 
       pathMatch: 'full'
    }]
}
];

Чтобы установить идентификатор вместо «детализации» маршрута, чтобы вы могли получить к нему доступ через глубокую связь в будущем. 

const routes: Routes = [
{
    path: '', 
    component: FilmsPage
},
{
    path: ':filmsID',
    children: [
    {
       path: '', 
       loadChildren: () => 
       import('../film-details/film-details.module')
           .then(m => m.FilmDetailsPageModule), 
    }]
}
];
...