Error: Cannot match any routes (Angular 7)

Question

您好，我在 angular 应用中配置路由时遇到问题。我一直收到错误 'Cannot match any routes'，所以我猜有些地方配置不正确。

我正在努力做到这一点，当用户从 table 中单击一个人的名字时，它将把他们带到一条新路线 (detail/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'

查看此 link 了解更多信息：https://angular.io/guide/router

Error: Cannot match any routes (Angular 7)

Error: Cannot match any routes (Angular 7)

components

web-services

typescript

angular-ui-router