Angular路由解析器返回多数据：如何合并Observable与字符串？

你的问题核心在于：当前解析器返回的对象里，userInfo是一个未被订阅的Observable，路由并不会自动帮你解析它的值，所以组件无法拿到实际的用户信息数据。要解决这个问题，我们需要把同步的token和异步的userInfo数据流合并成一个单个Observable返回，这样路由会自动订阅它并解析出最终的完整数据。

具体实现步骤 #

首先确保你导入了RxJS的map操作符（Angular项目中一般已经预装了RxJS，但需要显式导入操作符）：

import { map } from 'rxjs/operators';

然后修改你的解析器代码：

constructor(private authService: AuthService) { }

resolve(): Observable<{ token: string; userInfo: any }> {
  // 先获取userInfo的异步数据流，再通过map操作符把同步token合并进去
  return this.authService.getUserInfo().pipe(
    map(userInfo => ({
      token: this.authService.token,
      userInfo
    }))
  );
}

为什么这样可行？ #

1. this.authService.getUserInfo()返回一个Observable，当用户信息数据加载完成时，它会发出对应的userInfo值。
2. 通过map操作符，我们把同步的token和异步返回的userInfo组合成一个新的对象。
3. 路由解析器会自动订阅这个Observable，等待它完成后，将组合后的对象作为路由数据传递给目标组件。

组件中获取数据的方式 #

在目标组件里，你可以通过ActivatedRoute的snapshot.data拿到完整的token和userInfo数据：

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

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
  const resolverData = this.route.snapshot.data;
  const token = resolverData.token;
  const userInfo = resolverData.userInfo;
  // 现在可以正常使用这两个值了
}

额外说明 #

如果你的token也是异步获取的（比如需要从服务端请求），那可以改用forkJoin来合并两个Observable：

import { forkJoin, of } from 'rxjs';
import { map } from 'rxjs/operators';

// 假设token也是Observable的情况
resolve(): Observable<{ token: string; userInfo: any }> {
  return forkJoin([
    this.authService.getToken(), // 异步获取token的方法
    this.authService.getUserInfo()
  ]).pipe(
    map(([token, userInfo]) => ({ token, userInfo }))
  );
}

内容的提问来源于stack exchange，提问作者Imad El Hitti