错误:无法匹配任何路由(角度 7)

Question

嗨，我在 angular 应用程序中配置路由时遇到问题。我不断收到错误"无法匹配任何路由"，所以我猜有些东西配置不正确。

我正在尝试使用户从表中单击人员姓名时，它将带他们到新路线(详细信息/ID(，然后显示该特定人员信息。

这是我的代码：

运行器列表.HTML - 用户将单击名称的位置

<h2 class="text-center">{{title}}</h2>
<div class="container">
<table class="table table-striped">
<thead class="thead-dark">
<tr>
<th scope="col">Runner Name</th>
<th scope="col">UKAN Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let runner of myRunners | paginate: {itemsPerPage: 10, currentPage: p }">
<td><a routerLink="/detail/{{runner.RunnerUKAN}}">{{runner.RunnerName}}</a></td>
<td>{{runner.RunnerUKAN}}</td>
</tr>
</tbody>
</table>
<pagination-controls class="text-center" (pageChange)="p = $event"></pagination-controls>
</div>

应用路由模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RunnerDetailsComponent} from './runner-details/runner-details.component';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
{ path: 'detail:/id', component: RunnerDetailsComponent }
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }

运行器详细信息 ts 文件(单击时要显示的信息(

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';
import {RunnersService} from '../model/runners.service';
@Component({
selector: 'app-runner-details',
templateUrl: './runner-details.component.html',
styleUrls: ['./runner-details.component.css']
})
export class RunnerDetailsComponent implements OnInit {
Runner: any;
constructor(
private route: ActivatedRoute,
private RuService: RunnersService,
private location: Location
) { }
getHero() {
const id = +this.route.snapshot.paramMap.get('detail');
this.RuService.getRun(id).subscribe(runner => this.Runner = runner);
}
getRunner(id) {
this.RuService.getRun(id).subscribe(runner => this.Runner = runner);
}
ngOnInit() {
this.getHero();
}
}

如果需要任何其他文件，请告诉我。

感谢任何帮助

Answer 1

路径应该是 'detail/：id'，而不是 'detail：/id'

查看此链接以获取更多信息：https://angular.io/guide/router