角度：无法匹配任何路线。 URL段

Question

我有一个简单的路由模块，但出现错误Cannot match any routes. URL Segment: 'edit-fighter' Cannot match any routes. URL Segment: 'edit-fighter'当我单击<a>链接时， Cannot match any routes. URL Segment: 'edit-fighter'仅适用于champions-list路线，其余的我都得到了错误。

app.modules

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ChampionsListComponent } from './modules/champions- 
list/champions-list.component';
import { EditFightersComponent } from './modules/edit-fighters/edit- 
fighters.component';
import { AddFightersComponent } from './modules/add-fighters/add- 
fighters.component';

export const routes: Routes = [
  { path: 'champions-list', component: ChampionsListComponent },
  { path: 'edit-fighters', component: EditFightersComponent },
  { path: 'add-fighters', component: AddFightersComponent },
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

应用组件

<h2>COLISEUM MANAGEMENT</h2>
<nav>
  <a routerLink="/champions-list">Champions List</a>
  <a routerLink="/add-fighter">Add Fighter</a>
  <a routerLink="/edit-fighter">Edit Fighter</a>
</nav>
<router-outlet></router-outlet>

app.modules

...
import { routing } from './app.routes';

@NgModule({
 declarations: [...],
 imports: [
   BrowserModule,
   routing
 ],
 providers: [FightersService],
 bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

routerLink命名约定问题，

您正在使用的路径与S charachetr像路径=“ 编辑战士 ”

并且在您的html文件中，您仅使用了edit-fighter

在routerLink中添加或从路径中删除

Answer 2

拼写错误，名称为add-fighter和edit-fighter 。

使用此模板。

<h2>COLISEUM MANAGEMENT</h2>
<nav>
  <a routerLink="/champions-list">Champions List</a>
  <a routerLink="/add-fighters">Add Fighter</a>
  <a routerLink="/edit-fighters">Edit Fighter</a>
</nav>
<router-outlet></router-outlet>