Angular 6 路由

Angular 6 中引入了新的路由模块，使得路由的管理更加灵活和高效。本文将介绍如何在 Angular 6 中使用路由模块。

安装路由模块

使用 Angular CLI 创建一个新项目：

ng new my-app

进入项目目录并安装路由模块：

cd my-app
npm install @angular/router --save

定义路由

在 app.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: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

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

在上面的代码中，我们定义了两个组件 HomeComponent 和 AboutComponent，并定义了两个路由 home 和 about。我们还定义了一个默认路由，当用户访问根页面时自动跳转到 home 路由。

使用路由

要使用路由，我们需要在模板中添加路由链接和路由出口。

在 app.component.html 中添加路由链接：

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

<router-outlet></router-outlet>

在上面的代码中，我们使用 routerLink 指令将链接与路由关联。然后，在模板中使用 router-outlet 元素来定义路由出口。

带参数的路由

除了基本的路由之外，我们还可以定义带参数的路由。例如，我们可以定义一个 product 路由，用于显示单个产品的详细信息，该路由需要一个 productId 参数。定义带参数的路由的方法如下：

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

在上面的路由定义中，我们使用 :productId 表示该路由需要一个 productId 参数。然后在 ProductComponent 中使用 ActivatedRoute 来获取这个参数。

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  productId: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.productId = this.route.snapshot.params.productId;
  }
}

路由守卫

路由守卫用于控制用户访问页面的权限。例如，我们可以定义一个 AuthGuard 路由守卫来限制非登录用户访问某个页面。定义路由守卫的方法如下：

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

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

  canActivate(): boolean {
    if (localStorage.getItem('currentUser')) {
      return true;
    }

    this.router.navigate(['/login']);
    return false;
  }
}

在上面的代码中，我们定义了一个 AuthGuard 类并实现了 CanActivate 接口。在 canActivate 方法中，我们检查本地存储中是否存在 currentUser，如果存在，则允许用户访问页面，否则将其重定向到登录页面。

我们还需要在路由定义中使用 AuthGuard：

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'product/:productId', component: ProductComponent, canActivate: [AuthGuard] },
  { path: 'login', component: LoginComponent }
];

在上面的路由定义中，我们使用 canActivate 属性来指定需要使用的路由守卫。在访问 product/:productId 路由时，会先检查是否存在 AuthGuard 守卫。

总结

Angular 6 路由模块为前端开发者提供了强大的工具，使得页面的管理更加灵活和高效。本文介绍了如何定义路由、使用路由、定义带参数的路由和路由守卫。