1. 安装 Angular 路由模块：
在命令行中运行以下命令，安装 Angular 路由模块：
ng add @angular/router
这将安装路由模块并提示你选择路由配置。
2. 配置路由：
在 src/app 目录下创建一个 app-routing.module.ts 文件，用于配置路由。
// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AppComponent } from './app.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
const routes: Routes = [
{ path: '', redirectTo: '/heroes', pathMatch: 'full' },
{ path: 'heroes', component: HeroListComponent },
{ path: 'heroes/:id', component: HeroDetailComponent },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
这里定义了两个路由：一个用于显示英雄列表，另一个用于显示单个英雄的详细信息。路由配置中的 path: '' 表示默认路由，当用户访问根路径时自动导航到英雄列表。
3. 在模块中导入路由模块：
在你的模块中（通常是 app.module.ts）导入 AppRoutingModule。
// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HeroListComponent } from './hero-list/hero-list.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent, HeroListComponent, HeroDetailComponent],
imports: [BrowserModule, AppRoutingModule],
bootstrap: [AppComponent],
})
export class AppModule {}
4. 在 HTML 模板中添加路由链接：
在你的组件的 HTML 模板中，使用 routerLink 指令添加路由链接。
<!-- src/app/app.component.html -->
<h1>Hero Tour</h1>
<nav>
<a routerLink="/heroes">Heroes</a>
</nav>
<router-outlet></router-outlet>
这里的 <router-outlet> 是一个占位符，用于显示路由组件的内容。
5. 在组件中使用 ActivatedRoute 获取路由参数：
如果你的路由需要接收参数（比如显示单个英雄的详细信息），你可以在相应的组件中使用 ActivatedRoute 服务。
// src/app/hero-detail/hero-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { HeroService } from '../hero.service';
@Component({
selector: 'app-hero-detail',
template: `
<h2>Hero Detail</h2>
<div *ngIf="hero">
<h3>{{ hero.name }}</h3>
</div>
`,
styles: [],
})
export class HeroDetailComponent implements OnInit {
heroId: number | undefined;
hero: Hero | undefined;
constructor(
private route: ActivatedRoute,
private heroService: HeroService
) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
this.heroId = parseInt(params.get('id') || '', 10);
this.hero = this.heroService.getHeroById(this.heroId);
});
}
}
在这个例子中，通过 ActivatedRoute 获取了路由参数中的英雄 ID，并使用 HeroService 获取对应的英雄信息。
6. 运行应用：
在命令行中运行 ng serve，然后在浏览器中打开 http://localhost:4200/，你应该能够看到导航链接，并能够通过导航查看英雄列表和单个英雄的详细信息。
这就是在 Angular 项目中添加导航的基本步骤。
转载请注明出处：http://www.zyzy.cn/article/detail/5025/Angular