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

Question

我正在尝试在 angular 中使用 resolve guard 来预加载路由数据。

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

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.

DiscussionListService 看起来像这样：

export class DiscussionListService {

  constructor(private httpClient: HttpClient) { }

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

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

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}}

我的问题是：

我什么时候应该使用通用类型的 DiscussionList 与 DiscussionList[]
如何将从 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;
  })
);

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

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

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

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

Subscribing or assigning one RxJS observable to another, angular Resolve Guard

observable

rxjs

angular