Angular中Resolver依赖其他Resolver的处理方案问询

没问题，这种依赖式的Resolver调用在Angular里完全可以实现，核心就是让数据请求的Resolver等待国家Resolver的结果返回后再执行，下面给你两种实用的实现方案，你可以根据自己的场景选择：

方案一：用组合Resolver统一控制执行顺序 #

这种方式把两个Resolver的逻辑合并到一个服务里，明确控制先获取国家、再请求数据的顺序，代码更集中，适合强依赖的场景。

1. 先确保你的国家Resolver能正常返回国家名称：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { CountryApiService } from './country-api.service'; // 替换成你实际的国家API服务

@Injectable({ providedIn: 'root' })
export class ResolveCountryService implements Resolve<string> {
  constructor(private countryApi: CountryApiService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
    // 这里调用后端接口获取用户国家，比如IP定位接口
    return this.countryApi.getUserCountry();
  }
}

2. 创建一个组合Resolver，先调用国家Resolver，再用返回的国家名称请求数据：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, switchMap } from 'rxjs';
import { ResolveCountryService } from './resolve-country.service';
import { DataApiService } from './data-api.service'; // 替换成你实际的数据API服务

@Injectable({ providedIn: 'root' })
export class CombinedHomeResolver implements Resolve<any> {
  constructor(
    private countryResolver: ResolveCountryService,
    private dataApi: DataApiService
  ) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // 先获取国家数据，再切换到数据请求
    return this.countryResolver.resolve(route, state).pipe(
      switchMap(country => {
        return this.dataApi.getHomeData(country);
      })
    );
  }
}

3. 配置路由时只需要指定这个组合Resolver：

import { Routes} from '@angular/router'; 
import { HomeComponent } from '../pages/home/home.component'; 
import { CombinedHomeResolver } from '../shared/service/combined-home.resolver';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    resolve: {
      homeData: CombinedHomeResolver
    }
  }
];

方案二：让数据Resolver依赖国家Resolver的结果 #

如果你的国家Resolver需要在多个路由里复用，这种方式更灵活，通过route.data的Observable等待国家数据返回后再执行请求。

1. 先配置路由，同时添加两个Resolver：

import { Routes} from '@angular/router'; 
import { HomeComponent } from '../pages/home/home.component'; 
import { ResolveService } from '../shared/service/resolve.service'; 
import { ResolveCountryService } from '../shared/service/resolve-country.service';

export const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    resolve: {
      country: ResolveCountryService, // 先声明国家Resolver
      homeData: ResolveService        // 再声明数据Resolver
    }
  }
];

2. 修改你的ResolveService，通过route.data等待国家数据：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable, switchMap } from 'rxjs';
import { DataApiService } from './data-api.service';

@Injectable({ providedIn: 'root' })
export class ResolveService implements Resolve<any> {
  constructor(private dataApi: DataApiService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // 订阅route.data，等待country数据返回后再请求数据
    return route.data.pipe(
      switchMap(data => {
        const country = data['country'];
        return this.dataApi.getHomeData(country);
      })
    );
  }
}

最后在HomeComponent中获取数据 #

不管用哪种方案，都可以在组件的ngOnInit里通过路由快照拿到Resolver返回的数据：

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit {
  homeData: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.homeData = this.route.snapshot.data['homeData'];
    // 如果用方案二，还能拿到国家数据：this.route.snapshot.data['country']
  }
}

这样就能确保首页加载前，先完成国家获取，再完成数据请求，完全满足你的需求啦～

内容的提问来源于stack exchange，提问作者3gwebtrain