Angular 14路由配置：点击课程时URL显示课程Slug并展示详情

问题概述 #

当前点击课程列表项时，仅在Course-details组件展示详情，但URL保持localhost:4200/courses不变。需要实现点击后URL更新为localhost:4200/courses/{course-slug}，同时正确展示对应课程详情，刷新页面也能保持状态。

解决方案步骤 #

1. 修正路由配置

调整路由结构，将单独的course/:title路由改为courses/:slug，匹配目标URL格式：

// app.routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { CoursesComponent } from './courses/courses.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'courses', component: CoursesComponent},
  // 修改为courses/:slug，对应目标URL结构
  { path: 'courses/:slug', component: CoursesComponent },
  { path: '**', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 添加Slug生成工具函数

在CoursesComponent中添加工具函数，将课程标题转换为符合URL规范的slug（小写、空格替换为连字符、移除特殊字符）：

// courses.component.ts 中新增工具函数
private generateSlug(title: string): string {
  return title
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-') // 替换非字母数字字符为连字符
    .replace(/^-+|-+$/g, ''); // 移除首尾连字符
}

3. 修改selectCourse方法更新URL

点击课程时，调用Router.navigate更新URL，同时传入生成的slug参数：

// courses.component.ts 中修改selectCourse方法
selectCourse(course: any) {
  this.selectedCourse = course;
  // 生成slug并导航到对应路由
  const slug = this.generateSlug(course.title);
  this.router.navigate(['/courses', slug]);
}

4. 完善初始化逻辑，支持路由参数匹配

在ngOnInit中，根据路由参数里的slug找到对应的课程并选中，确保刷新页面时能保持选中状态：

// courses.component.ts 中修改ngOnInit方法
ngOnInit(): void {
  this.fetchCourses();
  this.route.paramMap.subscribe(params => {
    const slug = params.get('slug');
    if (slug) {
      // 当路由有slug参数时，查找对应课程
      this.courses$.subscribe(courses => {
        const matchedCourse = courses.find((course: any) => 
          this.generateSlug(course.title) === slug
        );
        this.selectedCourse = matchedCourse || emptyCourse;
      });
    } else {
      // 无slug参数时，选中空课程
      this.selectedCourse = emptyCourse;
    }
  });
}

关键说明 #

• 使用Router.navigate时，因为目标路由仍指向CoursesComponent，组件不会重新初始化，只会触发路由参数订阅，避免不必要的组件销毁重建。
• Slug生成函数确保URL符合规范，若存在重复标题，建议结合课程ID生成唯一slug（如angular-13-fundamentals-123）。
• 路由参数订阅逻辑确保页面刷新时，能根据URL中的slug自动选中对应课程，保持状态一致。

内容的提问来源于stack exchange，提问作者Muhammad Abdul Rehman