Error: Cannot match any routes in Angular 5

Question

根据这个 Stack Overflow 线程 ()，我的问题是一样的，但不幸的是我无法解决。唯一的区别是我的开始屏幕是登录。主屏幕有 SideNav，其中每个项目都包含其路径名。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Router, Routes } from '@angular/router';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { AuthguardService } from './authguard.service';
import { SelectpatientComponent } from
    './selectpatient/selectpatient.component';
import { MonitorPatientComponent } from './monitor-patient/monitor-patient.component';

const routes: Routes = [
    {
        path: 'main', component: MainComponent, canActivate: [AuthguardService],
        children: [
            { path: '', canActivate: [AuthguardService], component: SelectpatientComponent },
            {
                path: 'selectpatient', canActivate: [AuthguardService], component: SelectpatientComponent,
                pathMatch: 'full'
            },
            {
                path: 'monitorpatient', canActivate: [AuthguardService], component: MonitorPatientComponent,
                pathMatch: 'full'
            }

        ]
    },
    { path: '', component: LoginComponent, pathMatch: 'full' },
];

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    exports: [
        RouterModule
    ],
    providers: []
})
export class AppRoutingModule { }

main.component.html

 <div class="example-container">
    <mat-toolbar class="example-toolbar">
        <button mat-icon-button (click)="snav.toggle()">
            <mat-icon>menu</mat-icon>
        </button>
        <h1 class="example-app-name">Select Patient</h1>
    </mat-toolbar>

    <mat-sidenav-container class="example-sidenav-container">
        <mat-sidenav #snav mode="over" fixedTopGap="56">
            <mat-nav-list>
                <app-menu-list-item *ngFor="let item of navItems" [item]="item"></app-menu-list-item>
            </mat-nav-list>
        </mat-sidenav>
        <router-outlet></router-outlet>
    </mat-sidenav-container>
</div>

mat-sidenav 包含具有路线名称的导航项。 导航-item.ts

export interface NavItem {
    displayName: string;
    disabled?: boolean;
    iconName: string;
    route?: string; // <- Contains Route name
    children?: NavItem[];
}

这就是我在点击导航项时的导航方式：

if (!item.children || !item.children.length) {
  this.router.navigate([item.route]);
  //this.navService.closeNav();
  console.log("onItemSelected");
}

浏览器控制台上的错误消息：

core.js:1671 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'monitorpatient'
Error: Cannot match any routes. URL Segment: 'monitorpatient'

注意：我刚开始Angular。

Answer 1

我猜你的 item.route 的值为 'monitorpatient' 但你的实际路线是 'main/monitorpatient'。你应该做

 this.router.navigate(['/', 'main', item.route]);

Error: Cannot match any routes in Angular 5

Error: Cannot match any routes in Angular 5

angular

typescript

angular-ui-router

angular5