Angular 路由与导航

Angular 路由与导航

在现代 Web 开发中，单页应用 (SPA) 已经成为了主流。SPA 可以提供更好的用户体验，并且可以更好地应对复杂的应用场景。Angular 作为一个流行的前端框架，提供了一套强大的路由和导航机制，可以帮助我们实现 SPA 的效果，并实现多页面应用 (MPA) 的效果。在本文中，我们将介绍 Angular 的路由和导航机制，以及如何在应用程序中使用它们。

前置知识

在学习本文之前，你需要具备以下知识：

• Angular 框架的基础知识，包括组件、模块、服务等。
• TypeScript 语言的基础知识，包括接口、类、泛型等。
• HTML 和 CSS 的基础知识，包括标签、样式等。

路由和导航的基本概念

在 Angular 中，路由 (Route) 是指一组 URL 和对应的组件之间的关系。路由可以帮助我们将应用程序的不同部分分离开来，并进行单独的管理。在 Angular 中，我们使用 @angular/router 模块来配置和管理路由。这个模块提供了一组 API，可以帮助我们实现路由和导航功能。

导航 (Navigation) 是指将用户从一个路由导航到另一个路由的过程。在 Angular 中，导航可以通过点击链接、提交表单、编程式导航等方式进行。当用户进行导航时，Angular 会根据路由配置信息，找到对应的组件，并显示在页面上。

路由配置

在 Angular 中，路由配置是指将 URL 和对应的组件进行映射的过程。路由配置通常在模块中进行，可以使用 RouterModule.forRoot() 方法进行配置。例如，我们可以在 app.module.ts 文件中进行路由配置，如下所示：

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

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

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

在这个代码中，我们首先导入了 RouterModule 和 Routes 类型，并定义了两个路由：根路由和 /about 路由。我们使用 RouterModule.forRoot() 方法来进行路由配置，并将路由数组传递给该方法。最后，我们将 RouterModule 模块导出，并在 AppModule 中进行导入。

在路由配置中，每个路由都包含一个 path 属性和一个 component 属性。path 属性表示 URL，component 属性表示对应的组件。例如，{ path: '', component: HomeComponent } 表示根路由，对应的组件是 HomeComponent。

除了 path 和 component 属性之外，路由还可以包含其他属性，例如 redirectTo、pathMatch、data 等。这些属性可以帮助我们更精确地配置路由和导航。

路由插座

在 Angular 中，路由插座 (Router Outlet) 是指一个占位符标记，用于显示当前路由对应的组件。我们可以在模板中使用 <router-outlet> 标签来定义路由插座。例如：

<div>
  <nav>
    <a routerLink="/">Home</a>
    <a routerLink="/about">About</a>
  </nav>
  <router-outlet></router-outlet>
</div>

在这个代码中，我们首先创建了一个导航栏，其中包含两个链接：Home 和 About。当用户单击这些链接时，Angular 会根据路由配置信息，将对应的组件显示在 <router-outlet> 标签中。

路由导航

在 Angular 中，路由导航可以通过多种方式进行，例如链接点击、表单提交、编程式导航等。下面，我们将分别介绍这些方式。

链接点击

在 Angular 中，我们可以使用 routerLink 指令来创建链接，并在用户单击链接时进行路由导航。例如：

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

在这个代码中，我们使用 routerLink 指令来创建两个链接，分别指向根路由和 /about 路由。当用户单击链接时，Angular 会自动导航到指定的页面。

表单提交

在 Angular 中，我们可以使用 Router 服务来进行程序化导航，并通过表单进行提交。例如：

<form (submit)="onSubmit()">
  <input type="text" [(ngModel)]="username" name="username">
  <button type="submit">Submit</button>
</form>

在这个代码中，我们首先创建了一个包含一个输入框和一个提交按钮的表单。当用户单击提交按钮时，Angular 会调用 onSubmit() 方法，并在该方法中使用 Router 服务进行路由导航。例如：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  template: `
    <form (submit)="onSubmit()">
      <input type="text" [(ngModel)]="username" name="username">
      <button type="submit">Submit</button>
    </form>
  `
})
export class LoginComponent {
  username: string;

  constructor(private router: Router) {}

  onSubmit() {
    this.router.navigate(['/profile', this.username]);
  }
}

在这个代码中，我们首先导入了 Router 服务，并在组件类中定义了一个 onSubmit() 方法。在该方法中，我们调用 navigate() 方法，并传递了一个路由数组，以便导航到 /profile/:username 路由。

编程式导航

在 Angular 中，我们可以使用 Router 服务来进行程序化导航。例如：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: `
    <h1>Welcome to Home Page</h1>
    <button (click)="goToAbout()">Go to About Page</button>
  `
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

在这个代码中，我们首先注入了 Router 服务，并在组件类中定义了一个 goToAbout() 方法。在该方法中，我们调用 navigate() 方法，并传递了一个路由数组，以便导航到 /about 路由。

路由守卫

在 Angular 中，路由守卫 (Route Guard) 是指一些用于保护路由的机制。路由守卫可以帮助我们控制用户访问路由的权限，例如登录验证、授权验证等。在 Angular 中，路由守卫可以通过实现 CanActivate、CanActivateChild、CanDeactivate、Resolve 等接口来实现。下面，我们将分别介绍这些接口。

CanActivate

CanActivate 接口用于验证用户是否有访问路由的权限。当用户尝试访问一个受保护的路由时，Angular 会自动调用 CanActivate 接口中的 canActivate() 方法。如果该方法返回 true，则用户可以访问该路由，否则用户将被重定向到指定的路由。

下面是一个实现 CanActivate 接口的例子：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';

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

  canActivate(): boolean {
    if (localStorage.getItem('token')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

在这个代码中，我们首先导入了 CanActivate 接口和 Router 服务，并定义了一个名为 AuthGuard 的路由守卫。在 canActivate() 方法中，我们首先判断用户是否已经登录，如果已经登录，则返回 true，否则重定向到 /login 路由，并返回 false。

CanActivateChild

CanActivateChild 接口用于验证用户是否有访问子路由的权限。当用户尝试访问一个受保护的子路由时，Angular 会自动调用 CanActivateChild 接口中的 canActivateChild() 方法。如果该方法返回 true，则用户可以访问该子路由，否则用户将被重定向到指定的路由。

下面是一个实现 CanActivateChild 接口的例子：

import { Injectable } from '@angular/core';
import { CanActivateChild, Router } from '@angular/router';

@Injectable()
export class AuthChildGuard implements CanActivateChild {
  constructor(private router: Router) {}

  canActivateChild(): boolean {
    if (localStorage.getItem('token')) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

在这个代码中，我们首先导入了 CanActivateChild 接口和 Router 服务，并定义了一个名为 AuthChildGuard 的路由守卫。在 canActivateChild() 方法中，我们首先判断用户是否已经登录，如果已经登录，则返回 true，否则重定向到 /login 路由，并返回 false。

CanDeactivate

CanDeactivate 接口用于验证用户是否可以离开当前路由。当用户尝试离开当前路由时，Angular 会自动调用 CanDeactivate 接口中的 canDeactivate() 方法。如果该方法返回 true，则用户可以离开当前路由，否则用户将被阻止离开当前路由。

下面是一个实现 CanDeactivate 接口的例子：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class ConfirmDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate): Observable<boolean> | Promise<boolean> | boolean {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

在这个代码中，我们首先定义了一个名为 CanComponentDeactivate 的接口，用于表示组件是否可以离开当前路由。然后，我们定义了一个名为 ConfirmDeactivateGuard 的路由守卫，并实现了 CanDeactivate 接口。在 canDeactivate() 方法中，我们首先判断组件是否实现了 CanComponentDeactivate 接口，如果实现了，则调用 canDeactivate() 方法，否则直接返回 true。

Resolve

Resolve 接口用于在路由激活之前获取一些数据，并将这些数据传递给对应的组件。当用户尝试访问一个路由时，Angular 会自动调用 Resolve 接口中的 resolve() 方法，并等待该方法返回一个 Observable。然后，Angular 会将 Observable 中的数据传递给对应的组件，以便组件在显示之前进行处理。

下面是一个实现 Resolve 接口的例子：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { UserService } from './user.service';

@Injectable()
export class UserResolve implements Resolve<any> {
  constructor(private userService: UserService) {}

  resolve(route: ActivatedRouteSnapshot): Observable<any> {
    const id = route.paramMap.get('id');
    return this.userService.getUserById(id);
  }
}

在这个代码中，我们首先导入了 Resolve 接口、ActivatedRouteSnapshot 类型和 UserService 服务，并定义了一个名为 UserResolve 的路由解析器。在 resolve() 方法中，我们首先从路由参数中获取用户 ID，然后调用 UserService 服务的 getUserById() 方法，以便获取对应的用户信息。

总结

在本文中，我们介绍了 Angular 的路由和导航机制，以及如何在应用程序中使用它们。我们学习了路由配置、路由插座、路由导航和路由守卫等概念，以及如何使用 @angular/router 模块进行配置和管理。我们还介绍了 CanActivate、CanActivateChild、CanDeactivate 和 Resolve 等路由守卫的用法，并提供了一些示例代码。最后，我们希望本文能够帮助读者更好地理解 Angular 的路由和导航机制，并在实际开发中应用它们。