Angular：如何为非路由关联的静态组件获取resolver返回的数据

方案1：监听路由事件直接获取当前激活路由的Resolver数据 #

因为你的静态组件不属于路由出口渲染的组件，ActivatedRoute默认指向的是它声明位置对应的父级路由，直接拿快照拿不到子路由的Resolver数据。可以通过监听Router的导航完成事件，递归获取当前激活的最深层级路由的data：

// static.component.ts
import { NavigationEnd, Router } from '@angular/router';
import { filter } from 'rxjs';

constructor(private router: Router) {}

ngOnInit(){
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 递归获取当前激活的最深子路由
    let route = this.router.routerState.root;
    while (route.firstChild) {
      route = route.firstChild;
    }
    const data = route.snapshot.data['deliveryData'];
    console.log(data);
  })
}

该方案无需额外新增中间层，适合仅静态组件需要用到该数据的场景。

方案2：通过共享服务中转数据 #

如果后续还有其他组件也需要用到该Resolver返回的数据，可以用服务作为公共数据容器，解耦数据传递逻辑：

步骤1：创建共享服务 #

// delivery-data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

  setDeliveryData(data: any) {
    this.deliveryData$.next(data);
  }
}

步骤2：在Resolver中存入数据 #

// cart.resolver.ts
constructor(private http: xxx, private deliveryDataService: DeliveryDataService) {}

resolve(): Observable<any>{
  const payload = xyz;
  return this.http.postHttpRequest(payload).pipe(
    tap(data => this.deliveryDataService.setDeliveryData(data))
  );
}

步骤3：静态组件订阅数据 #

// static.component.ts
constructor(private deliveryDataService: DeliveryDataService) {}

ngOnInit(){
  this.deliveryDataService.currentDeliveryData$.subscribe(data => {
    if (data) {
      console.log(data);
    }
  })
}

该方案耦合度更低，扩展性更好，适合多组件共用同一份Resolver数据的场景。

方案3：调整Resolver挂载位置 #

如果你的3条子路由都属于同一个懒加载父路由，你可以把Resolver直接配置在父路由上，那么静态组件可以直接取父路由的data：

// 懒加载模块的路由配置
const routes: Routes = [
  {
    path: '',
    component: 存放router-outlet和static-component的父组件,
    resolve: { deliveryData: CartResolver },
    children: [
      // 你的3条子路由配置
    ]
  }
]

此时静态组件不需要额外逻辑就可以直接拿到数据：

ngOnInit(){
  const data = this.activatedRoute.snapshot.data['deliveryData'];
  console.log(data);
}

该方案最简洁，适合3条子路由共用同一份Resolver数据的场景。

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