Angular 路由器不加载带有 PathParam 的矿机页面

Question

我正在研究 Angular 并且遇到了一些路由器问题，因为我正在尝试使用路径参数访问其中一个路由并且出现错误，页面无法加载。

主页：

被路由的一个：

app.module.ts 文件：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { CourseListComponents } from './courses/course-list.component';
import { StarComponent } from './star/star.component';
import { ReplacePipe } from './pipe/replace.pipe';
import { NavBar } from './nav-bar/nav-bar.component';
import { Error404Component } from './error-404/error-404.component';
import { InfoComponent } from './courses/course-info.component';

@NgModule({
  declarations: [
    AppComponent,
    CourseListComponents,
    StarComponent,
    ReplacePipe,
    NavBar,
    Error404Component,
    InfoComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'courses', component: CourseListComponents
      },
      {
        path: 'course/info:id', component: InfoComponent
      },
      {
        path: '', redirectTo: 'courses', pathMatch: 'full'
      },
      {
        path: '**', component: Error404Component
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

InfoComponent class:

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
    templateUrl: './course-info.component.html'
})
export class InfoComponent implements OnInit {

    courseId!: number;

    constructor(private activatedRoute: ActivatedRoute) { }

    ngOnInit(): void {
        this.courseId = +this.activatedRoute.snapshot.paramMap.get('id')!
    }
}

负责呈现内容的 HTML 组件：

<h2>Course List</h2>

<div class="form-group row">
    <label class="col-sm 2 col-form-label">Filter by course name:</label>

    <div class="col-sm-10">
        <input [(ngModel)]="filter" class="form-control">
    </div>
</div>

<table class="table table-striped">
    <thead>
        <tr>
            <th>Image</th>
            <th>Name</th>
            <th>Price</th>
            <th>Code</th>
            <th>Release Date</th>
            <th>Rating</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let course of filteredCourses">
            <td><img [src]="course.imageUrl" alt="Courses icons" width="40" height="40"></td>
            <td>{{ course.name }}</td>
            <td>{{ course.price }}</td>
            <td>{{ course.code | lowercase | replace: '-' : ' ' }}</td>
            <td>{{ course.releaseDate | date: 'dd/MM/yyyy' }}</td>
            <td>
                <app-star-component [rating]="course.rating"></app-star-component>
            </td>
            <td>
                <a [routerLink]="['/course/info', course.id]" class="btn btn-primary mr-2">Info</a>
            </td>
        </tr>
    </tbody>
</table>

访问页面时应呈现的内容：

<h2>Course ID: {{ courseId }}</h2>

谁想看完整代码，在下面的 link:

https://github.com/LeoManzini/BootcampSantander/tree/main/Angular/course-manager

谁能帮我解决这个问题，我将不胜感激！！

Answer 1

你错过了路线中的斜杠：

path: 'course/info:id', component: InfoComponent

应该是：

path: 'course/info/:id', component: InfoComponent

Angular 路由器不加载带有 PathParam 的矿机页面

Angular router does not load the mine page with the PathParam

angular

url-routing

angular2-routing

path-parameter

angular-route-segment