首先，确保你已经创建了英雄详情组件。如果没有，可以使用以下命令创建：
ng generate component hero-detail
接下来，更新路由配置，以便在点击英雄列表中的某个英雄时导航到相应的英雄详情页面。在app-routing.module.ts中：
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
const routes: Routes = [
{ path: 'heroes', component: HeroListComponent },
{ path: 'detail/:id', component: HeroDetailComponent },
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
在这个例子中，我们为/detail/:id路径配置了HeroDetailComponent组件。:id是一个动态路由参数，表示英雄的ID。这允许我们根据不同的英雄显示不同的详情。
然后，确保在HeroDetailComponent中能够获取到路由参数。在hero-detail.component.ts文件中，使用ActivatedRoute服务来获取路由参数：
// hero-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-hero-detail',
templateUrl: './hero-detail.component.html',
styleUrls: ['./hero-detail.component.css'],
})
export class HeroDetailComponent implements OnInit {
heroId: number;
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
this.heroId = +params.get('id');
// 根据英雄ID执行其他必要的操作
});
}
}
在上述代码中，通过ActivatedRoute服务订阅了路由参数的变化。当路由参数变化时，paramMap会发出一个包含参数信息的对象。我们使用+params.get('id')来将参数转换为数字，并将其存储在heroId属性中。
最后，创建hero-detail.component.html文件，用于显示英雄详情的具体内容：
<!-- hero-detail.component.html -->
<div *ngIf="heroId !== undefined">
<h2>Hero Detail</h2>
<p>Showing details for hero with ID {{ heroId }}</p>
<!-- Add more details as needed -->
</div>
这只是一个简单的例子，你可以根据实际需求扩展和完善英雄详情页面的内容。通过这些步骤，你的Angular应用现在应该能够在点击英雄列表中的英雄时，导航到相应的英雄详情页面。
转载请注明出处：http://www.pingtaimeng.com/article/detail/4943/Angular