Angular 教程：在单页面应用中导航

在 Angular 中，导航是构建单页面应用（SPA）时的重要概念。下面是一个简单的 Angular 导航教程，包括创建路由、导航到不同视图、传递参数等基本步骤。

步骤 1: 安装 Angular CLI
如果你还没有安装 Angular CLI，请通过以下命令进行安装：

npm install -g @angular/cli

步骤 2: 创建一个新的 Angular 项目
使用 Angular CLI 创建一个新的 Angular 项目：

ng new my-navigation-app

进入项目目录：

cd my-navigation-app

步骤 3: 创建组件
使用 Angular CLI 创建两个简单的组件，分别表示两个视图：

ng generate component home
ng generate component about

步骤 4: 配置路由
打开 src/app/app-routing.module.ts 文件，并配置路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

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

步骤 5: 在模板中使用路由链接
打开 src/app/app.component.html 文件，并在模板中使用 routerLink 指令创建导航链接：

<nav>
  <a routerLink="/home">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

步骤 6: 在模板中显示视图
打开 src/app/home/home.component.html 文件和 src/app/about/about.component.html 文件，并分别添加一些内容，以便在视图中显示一些信息。

<!-- home.component.html -->

<div>
  <h2>Welcome to the Home Page!</h2>
  <p>This is the home content.</p>
</div>

<!-- about.component.html -->

<div>
  <h2>About Us</h2>
  <p>This is the about page content.</p>
</div>

步骤 7: 启动应用
运行应用，查看效果：

ng serve

访问 http://localhost:4200，你应该能够看到应用并通过导航链接在不同的视图之间切换。

步骤 8: 传递参数
如果你想要在导航时传递参数，可以通过路由参数实现。例如，修改路由配置和组件，以传递用户 ID：

// app-routing.module.ts

const routes: Routes = [
  { path: 'user/:id', component: UserProfileComponent },
];

// user-profile.component.ts

import { ActivatedRoute } from '@angular/router';

export class UserProfileComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.userId = params['id'];
    });
  }
}

然后，创建一个导航链接，将用户 ID 作为参数传递：

<!-- app.component.html -->

<nav>
  <a routerLink="/user/1">User 1</a>
  <a routerLink="/user/2">User 2</a>
</nav>

这就是一个简单的 Angular 导航教程，演示了如何创建路由、导航到不同的视图以及如何传递参数。深入学习 Angular 路由和导航概念，可以帮助你构建更复杂和功能丰富的单页面应用。

转载请注明出处：http://www.pingtaimeng.com/article/detail/4938/Angular