Angular2 错误 : Cannot match any routes. URL 段:

Question

我试图将每个模块的所有路由组合到一个 routing.ts 中。但我收到错误 错误:无法匹配任何路由。 URL 段:'job'.. 我已经遵循了 angular2 的编码风格教程.. 我的代码有什么问题？

下面是我在routing.ts

中的代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JobComponent } from './job.component';
import { JobfileComponent } from './jobfile/jobfile.component';
import { JobcompletedComponent } from './jobcompleted/jobcompleted.component';
import { FullLayoutComponent } from '../layouts/full-layout.component';

const routes: Routes = [
  { path: '',redirectTo: 'job',pathMatch: 'full' },
  { path: '',component: FullLayoutComponent,data: {title: 'Job Assignment' },
    children: [ {path: 'job',loadChildren: './job/job.module#JobModule' }, ]
  },
  { path: '',redirectTo: 'jobfile',pathMatch: 'full' },
  { path: '',component: FullLayoutComponent,data: {title: 'Job File' },
    children: [ {path: 'jobfile',loadChildren: './job/jobfile/jobfile.module#JobfileModule' }, ]

  },
  { path: '',redirectTo: 'jobcompleted',pathMatch: 'full' },
  { path: '',component: FullLayoutComponent,data: {title: 'Job Completed' },
    children: [ {path: 'jobcompleted',loadChildren: './job/jobcompleted/jobcompleted.module#JobcompletedModule' }, ]

  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: [ JobComponent, JobfileComponent, JobcompletedComponent, FullLayoutComponent ]
})
export class JobRoutingModule {}

Answer 1

我将尝试解释出了什么问题以及我们可以做些什么来解决这个问题。

#1: '' 路线被重定向到 超过 1 路线。它造成了歧义，Angular 路由器无法决定哪里 重定向 到。我假设 '' 需要重定向到 '/jobs' .

#2:带有 loadChildren 的路由定义不应包含 component属性(property)。

#3:滥用FullLayoutComponent作为模板。您可以使用 AppComponent要由 Angular 应用程序引导，请使用 router-outlet在 app.component.html并让您的模板正常工作。

尝试修复您的文件/目录结构并修复您的模块代码，如下所述。

文件/目录结构:

|- app.module.ts
|- app.component.ts (copy the ../layouts/full-layout.component into this file)
|- job\
    |- job.module.ts
    |- jobfile\
        |- jobfile.module.ts
    |- jobcompleted\
        |- jobcompleted.module.ts

工作模块

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
import { JobComponent } from './job.component';

const jobRoutes: Routes = [
    {
        path: '',
        component: JobComponent,
        data: {title: 'Job Assignment' },
    }
];

@NgModule({
    declarations: [
        JobComponent
    ],
    imports: [
        RouterModule.forChild(jobRoutes)
    ]
})
class JobModule { }

jobfile.module

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
import { JobfileComponent } from './jobfile/jobfile.component';

const jobFileRoutes: Routes = [
    {
        path: '',
        component: JobfileComponent,
        data: {title: 'Job File' },
    }
];

@NgModule({
    declarations: [
        JobfileComponent
    ],
    imports: [
        RouterModule.forChild(jobFileRoutes)
    ]
})
class JobFileModule { }

jobcompleted.module

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
import { JobcompletedComponent } from './jobcompleted/jobcompleted.component';

const jobCompletedRoutes: Routes = [
    {
        path: '',
        component: JobcompletedComponent,
        data: {title: 'Job File' },
    }
];

@NgModule({
    declarations: [
        JobcompletedComponent
    ],
    imports: [
        RouterModule.forChild(jobCompletedRoutes)
    ]
})
class JobCompletedModule { }

应用程序模块

import { NgModule } from '@angular/core`;
import { Routes, RouterModule } from '@angular/router';
// OTHER IMPORTS
// ...
import { AppComponent } from './app.component.ts';

const routes: Routes = [
    { path: 'job', loadChildren: './job/job.module#JobModule' }
    { path: 'jobfile', loadChildren: './job/jobfile/jobfile.module#JobfileModule' }
    { path: 'jobcompleted', loadChildren: './job/jobcompleted/jobcompleted.module#JobcompletedModule' }
    { path: '', redirectTo: 'job', pathMatch: 'full' },
];

@NgModule({
    declarations: [
        // OTHER COMPONENTS
        // ...
        AppComponent
    ],
    imports: [
        // OTHER MODULES
        // ...
        RouterModule.forRoot(routes)
    ],
    // PROVIDERS, ETC ADD BELOW
    // ...
    bootstrap: [AppComponent]
})
class AppModule { }

最后，您需要提供 app.component.ts和 app.component.html .基本上，从您的 FullLayoutComponent 复制核心更新这些文件。

确保包含 <router-outlet></router-outlet>在你的app.component.html .这 outlet 将被 Angular 路由器用来渲染你的 JobComponent 的内容。 , JobfileComponent , JobcompletedComponent .

希望答案对您有所帮助，Angular 快乐 ;)