Angular2错误：无法匹配任何路由。网址细分：

Question

我尝试将每个模块的所有路由组合在一个routing.ts中。但是我收到了错误Error: Cannot match any routes. URL Segment:'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属性。

＃3 ：滥用FullLayoutComponent作为模板。您可以使用AppComponent由Angular应用程序引导，使用router-outlet中的app.component.html并让您的模板正常运行。

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

file / dir结构：

|- 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

job.module

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 { }

app.module

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。 Angular路由器将使用此 outlet 来呈现您的JobComponent，JobfileComponent，JobcompletedComponent的内容。

希望答案是有帮助的，快乐的Angular'ing;）