错误：无法匹配任何路线（Angular 7）

Question

嗨，我在我的角度应用程序中无法配置路由。我不断收到错误消息“无法匹配任何路线”，因此我猜测某些配置不正确。

我正在努力做到这一点，因此，当用户从表中单击人员名称时，它将带他们到新的路线（详细信息/ ID），然后显示该特定人员的信息。

这是我的代码：

Runner-list.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 { }

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