从 Angular Route 中提前获取数据的方法详解

在 Angular 中，我们通常使用 Angular Route 来进行路由控制。在路由导航开始前，有时我们需要通过异步请求获取一些数据，例如从 API 中读取数据，然后才能进行视图渲染。本篇文章将介绍如何在 Angular Route 中预先获取这些数据。

路由 Resolver

路由 Resolver 是 Angular 路由提供的一种方式，它可以在路由导航之前解析数据。当路由导航开始时，路由器会在 Resolver 中运行一些代码，并等待它返回一个 Promise。然后，在路由导航嵌套的组件中，我们可以用 ActivatedRoute 中的 data 属性来获取 Resolver 传回的数据。

在路由模块中，我们可以为每一个路由定义一个 Resolver。下面是一个示例：

app-routing.module.ts

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

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

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

上述路由定义了两个路由，并为它们分别定义了一个 Resolver。我们在 HomeComponent 和 AboutComponent 中都可以通过 ActivatedRoute 中的 data 属性来获取 Resolver 传回的数据。

home.component.ts

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

@Component({
  selector: 'app-home',
  template: `
    <h1>{{ title }}</h1>
  `
})
export class HomeComponent {
  title: string;

  constructor(private route: ActivatedRoute) {
    this.title = this.route.snapshot.data['title'];
  }
}

about.component.ts

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

@Component({
  selector: 'app-about',
  template: `
    <h1>{{ title }}</h1>
  `
})
export class AboutComponent {
  title: string;

  constructor(private route: ActivatedRoute) {
    this.title = this.route.snapshot.data['title'];
  }
}

路由 Resolver 需要实现一个接口 Resolve，它只有一个方法 resolve()。我们可以在这个方法中运行一些异步代码，并返回一个 Promise，Promise 解析后的值会存储在 ActivatedRoute 的 data 属性中。下面是一个 Resolver 的示例：

home.resolver.ts

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

@Injectable()
export class HomeResolver implements Resolve<Promise<string>> {
  resolve(): Promise<string> {
    return Promise.resolve('Home Page');
  }
}

在上述代码中，HomeResolver 实现了 Resolve 接口，并在 resolve() 方法中返回了一个 String 类型的 Promise。

路由守卫

路由守卫是 Angular 路由体系中另一个非常有用的功能。例如，在用户点击页面的链接之前，我们可以进行一些验证，确保用户已经登录并获得了授权。路由守卫有五种类型：CanActivate，CanActivateChild，CanDeactivate，Resolve 和 CanLoad。其中，Resolve 已经在上述章节中介绍过了。这里我们介绍 CanActivate 和 CanActivateChild 两种守卫类型。

CanActivate

CanActivate 是一种路由守卫，它用于验证用户是否有权限访问某一路由。如果用户没有权限，可以在这里进行一些跳转或者其它的操作。CanActivate 接口只有一个方法 canActivate()，如果成功的话返回 true，否则返回一个 UrlTree 对象。

下面是一个 CanActivate 的示例，用于验证用户是否已经登录：

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

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

  canActivate(): boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      return this.router.parseUrl('/login');
    }
  }
}

在上述代码中，我们引入了一个 AuthService 服务，用于验证用户是否已经登录。如果已经登录，则返回 true，否则跳转到 /login 路由。我们可以在路由模块中使用该守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { AuthGuard } from './auth.guard';

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

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

在上述代码中，我们为 HomeComponent 路由定义了一个 CanActivate 守卫：AuthGuard。当用户访问 HomeComponent 路由时，如果未能通过 AuthGuard，将会跳转到 /login 路由。

CanActivateChild

CanActivateChild 类似于 CanActivate，但它只作用于子路由。如果一个路由下面有多个子路由，那么我们就可以使用 CanActivateChild 来验证子路由是否可以访问。

下面是一个 CanActivateChild 的示例：

import { Injectable } from '@angular/core';
import { CanActivateChild } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class ChildAuthGuard implements CanActivateChild {
  constructor(private authService: AuthService) {}

  canActivateChild(): boolean {
    return this.authService.isLoggedIn();
  }
}

在上述代码中，ChildAuthGuard 使用了 AuthService，我们在它的 canActivateChild() 方法中验证用户是否登录。我们可以在路由模块中使用该守卫：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { ChildAuthGuard } from './child-auth.guard';
import { ProfileComponent } from './profile/profile.component';

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivateChild: [ChildAuthGuard],
    children: [
      {
        path: 'profile',
        component: ProfileComponent
      }
    ]
  },
  {
    path: 'login',
    component: LoginComponent
  }
];

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

在上述代码中，我们为 HomeComponent 路由定义了一个 CanActivateChild 守卫：ChildAuthGuard。当用户访问 /profile 路由时，会触发 ChildAuthGuard 的验证。只有当用户已经登录，才能访问 /profile 路由。

总结

本文介绍了两种在 Angular Route 中预先获取数据的方法：路由 Resolver 和路由守卫。可以根据需要选择其中的一种或两种方式来进行使用。在实际场景中，这些功能非常实用，可以帮助我们更好的控制路由和获取异步数据。同时，本文还通过两个示例，说明了 Resolver 和守卫的使用方法，希望能对读者有所帮助。