如何从Guard向Component传递数据？避免重复API请求的方案

这确实是Angular路由开发中很常见的痛点——既要在路由激活前做参数校验，又不想重复发起API请求。下面给你几个实用的方案，按规范程度和易用性排序：

方案一：使用Resolve守卫（最推荐） #

Resolve守卫就是Angular官方为这种「路由激活前预加载数据并验证」场景设计的。它会在路由激活前自动获取数据，验证通过后把数据注入到路由的data对象中，组件直接从ActivatedRoute读取即可，完全避免重复请求。

步骤： #

1. 创建一个Resolve类，实现Resolve接口：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { DataService } from './data.service';
import { Observable, of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class DataResolver implements Resolve<any> {
  constructor(private dataService: DataService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    const id = route.paramMap.get('id');
    return this.dataService.fetchDataById(id).pipe(
      catchError(() => {
        // id不合法，跳转到错误页或列表页
        this.router.navigate(['/not-found']);
        return of(null);
      })
    );
  }
}

2. 在路由配置中关联这个Resolve：

const routes: Routes = [
  {
    path: 'item/:id',
    component: YourChildComponent,
    resolve: {
      itemData: DataResolver // 这里的key会作为data中的属性名
    }
  }
];

3. 在组件中获取数据：

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  // 直接从路由data中获取预加载的数据
  const itemData = this.route.snapshot.data['itemData'];
  // 或者用订阅方式（适合路由参数变化的场景）
  this.route.data.subscribe(data => {
    const itemData = data['itemData'];
    // 处理数据
  });
}

这个方案完全符合Angular的设计规范，既完成了参数合法性校验（API返回错误就跳转），又把数据直接传递给组件，没有重复请求。

方案二：使用共享服务存储数据 #

如果不想用Resolve，也可以通过一个全局共享服务来中转数据。Guard中获取数据后存在服务里，组件再从服务读取。

步骤： #

1. 创建一个共享服务：

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class SharedDataService {
  private itemDataSubject = new BehaviorSubject<any>(null);
  itemData$ = this.itemDataSubject.asObservable();

  setItemData(data: any) {
    this.itemDataSubject.next(data);
  }
}

2. 在Guard中调用API并存储数据：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { DataService } from './data.service';
import { SharedDataService } from './shared-data.service';
import { Observable, of } from 'rxjs';
import { tap, catchError } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class ItemGuard implements CanActivate {
  constructor(
    private dataService: DataService,
    private sharedDataService: SharedDataService,
    private router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    const id = route.paramMap.get('id');
    return this.dataService.fetchDataById(id).pipe(
      tap(data => {
        // 把数据存到共享服务
        this.sharedDataService.setItemData(data);
      }),
      catchError(() => {
        this.router.navigate(['/not-found']);
        return of(false);
      })
    );
  }
}

3. 在组件中订阅服务的数据：

import { SharedDataService } from './shared-data.service';

constructor(private sharedDataService: SharedDataService) {}

ngOnInit() {
  this.sharedDataService.itemData$.subscribe(data => {
    if (data) {
      // 处理数据
    }
  });
}

这个方案也能避免重复请求，但需要注意组件订阅时的时机（确保Guard已经完成数据请求），以及如果用户直接刷新页面，服务中的数据会丢失，不过Guard会重新执行，刷新后也会重新获取数据。

方案三：利用路由状态的额外数据（不推荐） #

虽然ActivatedRouteSnapshot的data是只读的，但你可以在Guard中通过router.navigate时传递额外的查询参数或状态数据，但这种方式不够优雅，而且参数会暴露在URL中（如果用查询参数），或者刷新后丢失（如果用state），所以不推荐作为主要方案。

总结 #

优先选择Resolve守卫，它是Angular官方针对这类场景的最佳实践，代码更规范，维护性更好。共享服务方案适合一些简单场景，或者已经有全局服务的情况。

内容的提问来源于stack exchange，提问作者Christian Klemm