时间戳

首页 > 解决方案 > Ionic5 / Angular9：navController.navigateForward 不起作用（错误：无法匹配任何路由。）

angular9 - Ionic5 / Angular9：navController.navigateForward 不起作用（错误：无法匹配任何路由。）

问题描述

我是新手Ionic 5并尝试使用Angular 9延迟加载navController.navigateForward，但它不起作用。

我不知道这是否与我设置路由器的方式有关，或者什么。而且我在任何地方都找不到有关 navigateForward 的官方信息。

当我单击“转到详细信息”（如下）时，出现错误Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'details/'

这是标签页：

在此处输入图像描述

tabs-routing.module.ts 路由器：

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'
          }
        ]
      }
    ]
  }
];

电影.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>

电影.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
  }

}

电影-routing.module.ts 路由器：

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'
        }
      ]
    }
  ]}
];

电影细节.page.html：

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

<ion-content>

</ion-content>

标签： angular9ionic5

解决方案

我对详细信息页面做了同样的事情，但我们使用了变量 id。你的情况应该是这样的

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

为路由设置 id 而不是“详细信息”，以便您将来可以通过深度链接访问它。

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

推荐阅读