订阅或分配一个 RxJS observable 给另一个 angular Resolve Guard

Question

我正在尝试使用 angular 的解析保护来预加载路线的数据。

我的路由模块有以下代码：

const routes: Routes = [
  {
    path: '',
    component: DiscussionListComponent,
    resolve: { discussionList$: DiscussionListResolverService }
  }
];

DiscussionListResolver服务实例化并具有以下代码：

 resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<DiscussionList[]> | Observable<never> {
    console.log('DiscussionListResover, RouterStateSnapshot.url: ' + state.url);
    return this.discussionListService.getDiscussionList().pipe(
      // @ts-ignore
       map( discussionList => {
         console.log('DiscussionListResolverService returning discusionList:' + discussionList);
         return of(discussionList);
       }),
      catchError( err => {
        console.log('DiscussionListResolverService returning EMPTY 1');
        return EMPTY;
      })
    );

它在控制台中产生以下输出

DiscussionListResolverService returning discusionList:[object Object],[object Object],[object Object]

所以看起来我有我想要的 3 个对象，麻烦的是将它们放入组件中。

问题可能出在 // @ts-ignore 上，它给我的管道带来了以下错误：

ERROR in src/app/discussion/discussion-list/discussion-list-resolver.service.ts:25:8 - error TS2554: Expected 0 arguments, but got 2.

讨论列表服务如下所示：

export class DiscussionListService {

  constructor(private httpClient: HttpClient) { }

  getDiscussionList(): Observable<DiscussionList[]> | Observable<never> {
    return this.httpClient
      .get<DiscussionList[]>('api/discussion-list/data.json');
  }
}

DataListComponent类看起来像这样，这是我遇到问题的地方：

discussionList$: Observable<DiscussionList>;

 ngOnInit(): void {
    const result = this.route.data.pipe(
      tap(data => console.log('tap data: ' + JSON.stringify(data)))
    ).subscribe(data => console.log('data ' + JSON.stringify(data)));
  }

这会产生以下控制台输出，对我来说，这表明我的组件没有接收到数据：

tap data: {"discussionList$":{"_isScalar":false}}
data {"discussionList$":{"_isScalar":false}}

我的问题是：

1. 我什么时候应该使用通用类型的 DiscussionList 与 DiscussionList[]
2. 如何获取从DiscussionListResolverService返回的DiscussionList数据到我的组件中？

谢谢你。

Answer 1

在您的解析器中执行此操作：

return this.discussionListService.getDiscussionList().pipe(
   tap( discussionList => {
     console.log('DiscussionListResolverService returning discusionList:' + discussionList);
   }),
  catchError( err => {
    console.log('DiscussionListResolverService returning EMPTY 1');
    return EMPTY;
  })
);

出于某种原因，您将响应转换为响应的 observable，并告诉打字稿忽略错误。 您看到该日志输出是因为您将其包装为 observable。 不要那样做。

重新使用DiscussionList与DiscussionList[] ，当它是一个DiscussionList对象时使用第一个，当它是一个数组时使用第二个。

此外，您可能不想在catchError实际返回EMPTY ，因为您的 UI 只会在错误情况下挂起。