Question

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

应用模块

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>

应用模块

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

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

Answer 1

routerLink 命名约定的问题，

您正在使用带有 s 字符的路径，例如path =' edit-fighters '

以及您的html文件中，您仅使用 edit-fighter

在 routerLink 中添加s或从 path

中删除s

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>

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

2 个答案: