Question

我正在编写一个简单的UI应用程序，我需要调用API以在产品详细信息组件中通过ID获取产品。我从路线参数中得到

通常，我会执行以下操作：

this.activatedRoute.params
   .subscribe(params => {
     if (params['primaryKey']) {
       this.service.get(params['primaryKey'])
         .subscribe(product => {
           this.product = product;
         });
     }
   });

使用这些订阅树看起来有点难看，但效果很好。我想使用更多的RxJS，因此它将看起来像这样（控制台日志仅用于演示）：

this.product$ = this.activatedRoute.params
  .pipe(filter(params => {
       console.log('in filter', params);
       return 'primaryKey' in params;
     }),
     map(params => {
       console.log('in map', params);
       return parseInt(params.primaryKey, 10);
     }),
     switchMap(primaryKey => {
       console.log('in switch map', primaryKey);
       return this.service.get(primaryKey);
     }));

但是直到我最终订阅它（它甚至不会触发任何控制台日志）后，它才这样工作……为什么？

Answer 1

如果要从创建的流中获取价值，则需要在最后订阅。除非您执行此操作，否则它不会起作用。其他方法是在product $的模板中使用异步管道。

Answer 2

从Observable开始，然后通过一些功能（过滤，映射等）。

但是，直到调用subscribe()，您才可以开始观察它并收集值。您可以将所有逻辑移到该函数内部，也可以将其提取到RxJS运算符，但最后仍是该函数：

this.product$ = this.activatedRoute.params
  .pipe(...)
  .subscribe();

您可以在subscribe function的文档中找到更多信息。

Answer 3

使用pipe应用各种运算符后，您将基于现有运算符创建新的Observable，这表示必须对发出的结果应用其他函数。

但是，直到创建第一个Subscription时它才发出值。

Answer 4

无需订阅的解决方案

您可以通过以下方式获取路由的参数：

this.route.snapshot.paramMap.get('id')

route 的类型为 ActivatedRoute

  constructor(
    private route: ActivatedRoute,
  ) { }

使用角路由参数而无需订阅

4 个答案:

无需订阅的解决方案