Angular 路由管理详解与案例

简介

Angular 路由管理是实现单页面应用（SPA）导航和页面跳转的重要工具。本文将详细介绍Angular路由的基础概念、配置方法以及高级用法，并通过案例讲解如何在实际项目中应用。

基础概念

RouterModule：Angular的路由模块，负责定义路由规则和导航逻辑。
RouterOutlet：用于在组件模板中显示当前激活的路由组件。
RouterLink：用于在模板中创建导航链接。
路由守卫（Guards）：用于控制路由访问权限和导航逻辑。

配置路由

首先，我们需要在Angular项目中配置路由。通常，这会在`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: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

使用RouterLink和RouterOutlet

在`app.component.html`中，我们可以使用`RouterLink`创建导航链接，并使用`RouterOutlet`显示当前激活的路由组件。


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

<router-outlet></router-outlet>

路由守卫

路由守卫用于在导航过程中控制访问权限或执行逻辑。例如，我们可以创建一个简单的守卫来检查用户是否登录。


import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable | Promise {
    const isLoggedIn = localStorage.getItem('isLoggedIn');
    if (!isLoggedIn) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

然后，在路由配置中使用该守卫：


const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

案例讲解：动态路由参数

假设我们有一个用户详情页面，需要显示不同用户的详细信息。我们可以使用动态路由参数来实现这一功能。

首先，在路由配置中定义参数：


const routes: Routes = [
  // ...其他路由
  { path: 'user/:id', component: UserDetailComponent }
];

然后，在`UserDetailComponent`中通过`ActivatedRoute`获取参数：


import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.userId = params['id'];
      // 根据userId获取用户详情
    });
  }
}