（角度）错误：无法匹配任何路线。网址段：“ tab3 /设置”

Question

我正在制作一个带有角度的离子应用程序，我需要创建一个链接来打开一个页面（以更新配置文件）。此链接包含在菜单中，该菜单由弹出窗口打开，并且此弹出窗口包含在tab3中。 单击链接时出现此错误：

错误

core.js:9110 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tab3/settings'
Error: Cannot match any routes. URL Segment: 'tab3/settings'
    at ApplyRedirects.noMatchError (router.js:3387)
    at CatchSubscriber.selector (router.js:3351)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:34182)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
    at invokeTask (zone-evergreen.js:1603)

Tabs.router.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: 'tab1',
            children: [
              {
                path: '',
                loadChildren: () =>
                  import('../tab1/tab1.module').then(m => m.Tab1PageModule)
              }
            ]
          },
          {
            path: 'tab2',
            children: [
              {
                path: '',
                loadChildren: () =>
                  import('../tab2/tab2.module').then(m => m.Tab2PageModule)
              }
            ]
          },
          {
            path: 'tab3',
            children: [
              {
                path: '',
                loadChildren: () =>
                  import('../tab3/tab3.module').then(m => m.Tab3PageModule)
              }
            ]
          },
          { path: 'tab3/settings', loadChildren: () => import('../tab3/settings/settings.module').then(m => m.SettingsPageModule),
          },
          {
            path: '',
            redirectTo: '/tabs/tab1',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ];

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

Tab3.page.ts

import { Component, OnInit } from '@angular/core';
import { User } from '../../interfaces/interfaces';
import { UserService } from 'src/app/services/user.service';
import { FormBuilder, FormGroup, Validators, FormControl, NgForm } from '@angular/forms';
import { UpdateUserFormValidator } from 'src/app/validators/updateUserForm';
import { UiServiceService } from '../../services/ui-service.service';
import { PostsService } from 'src/app/services/posts.service';
import { PopoverController } from '@ionic/angular';
import { SettingsPage } from './settings/settings.page';
import { MenuComponent } from '../../components/menu/menu.component';
@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit {
  constructor( private userService: UserService,
               private updateUserFormValidator: UpdateUserFormValidator,
               private uiService: UiServiceService,
               private formCtrl: FormBuilder,
               private postsService: PostsService,
               private popoverCtrl: PopoverController ) {
  }
  ngOnInit() {
  }
  logout() {
    this.postsService.pagePost = 0;
    this.userService.logout();
  }
  async openSettings(event: any) {
      const popover = await this.popoverCtrl.create({
          component: MenuComponent,
          event,
          animated: true,
          showBackdrop: true
      });
      return await popover.present();
  }
}

Settings.module.ts（包含在tab3.page.ts中）

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { SettingsPage } from './settings.page';
import { ComponentsModule } from '../../../components/components.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    ComponentsModule,
    IonicModule
  ],
  declarations: [SettingsPage]
})
export class SettingsPageModule {}

Menu.component.ts

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

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss'],
})
export class MenuComponent implements OnInit {

  constructor( private navCtrl: NavController ) { }

  ngOnInit() {}

  openSettings() {

    this.navCtrl.navigateForward('tab3/settings');

  }

}

Menu.component.html

<ion-list class="ion-no-margin ion-no-padding">
    <ion-list-header color="dark">
        <ion-label class="fw700">Configuración</ion-label>
    </ion-list-header>

    <ion-item color="primary" class="text-10" (click)="openSettings()">
        <ion-icon name="settings" color="light"></ion-icon>
        <ion-label>Actualizar perfil</ion-label>
    </ion-item>

</ion-list>

我插入一个屏幕截图，谢谢。 Screenshot of the application and error

更新

已解决：我采用了此解决方案：

menu.component.ts

 constructor(  public menuCtrl: MenuController,
                private navCtrl: NavController,
                private router: Router,
                private popoverCtrl: PopoverController ) { }

  ngOnInit() {}

  async openSettings() {

    this.navCtrl.navigateForward(this.router.url + '/settings');
    await this.menuCtrl.close();
    await this.popoverCtrl.dismiss();
  }

tabs.router.module.ts

{ path: 'tab3/settings',
    loadChildren: () => import('../tab3/settings/settings.module').then(m => m.SettingsPageModule),
  },