Angular路由没有加载html文件

Question

我正在Angular应用中开发一个路由。事实上，我已经实现了3条路由，但其中一条根本不起作用。

我有3个文件夹，我想根据所选择的选项重定向html。我在Angular中创建了文件夹courses并创建了以下代码

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CoursesDetailComponent } from './courses-detail/courses-detail.component';
import { CoursesComponent } from './courses/courses.component';
const routes: Routes = [
{path : '', redirectTo: '/courses', pathMatch: 'full'},
{path : 'courses', component: CoursesComponent},
{path : "/courses/:id", component: CoursesDetailComponent}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

所有这些路径都工作得很好，除了最后一个，当我在代码中保存它时，浏览显示什么都没有…

我创建的与课程信息相关的代码是:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-courses',
templateUrl: './courses.component.html',
styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {

courses = [
{'id': 1, 'name': 'Angular'},
{'id': 2, 'name': 'React'},
{'id': 3, 'name': 'MongoDB'},
{'id': 4, 'name': 'Ruby'},
{'id': 5, 'name': 'Bootstrap'},
];
constructor(private router: Router,
private route: ActivatedRoute) { }

ngOnInit(): void {
}
onSelect(courses: any){
this.router.navigate(['/courses', courses.id]);
}
}

当我添加代码下面的行时，我无法识别问题，可以编译，但浏览中没有出现任何内容。

{path : "/courses/:id", component: CoursesDetailComponent}

Answer 1

在您的AppRoutingModule中删除path属性中的第一个/，它应该如下所示

{path : "courses/:id", component: CoursesDetailComponent}

也在你的onSelect()方法中删除它，它应该看起来像这样

onSelect(courses: any){
this.router.navigate(['courses', courses.id]);
}