Angular 如何使用 combineLatest 合并来自网站 url 的路由和查询 bar

Question

我正在尝试从 url 栏获取路线和查询。以下代码来自 CodeWithMosh 的教程。我在 combineLatest 方法中遇到编译错误。

错误如下：

(property) paramMap: Observable Argument of type '{ paramMap: Observable; queryParamMap: Observable; }' is not assignable to parameter of type 'ObservableInput'.
Object literal may only specify known properties, and 'paramMap' does not exist in type 'ObservableInput'

我是 angular 的新手，我不确定错误是什么意思，我已经尝试按照 this 堆栈溢出答案进行操作，但我仍然遇到错误。谢谢。

完整代码如下：

    import { ActivatedRoute } from '@angular/router';
    import { GithubFollowersService } from './../services/github-followers.service';
    import { Component, OnInit } from '@angular/core';
    import 'rxjs/add/Observable/combineLatest';
    import { Observable } from 'rxjs/internal/Observable';
    import { combineLatest } from 'rxjs';

    @Component({
      selector: 'github-followers',
      templateUrl: './github-followers.component.html',
      styleUrls: ['./github-followers.component.css']
    })
    export class GithubFollowersComponent implements OnInit {
      followers : any[];

      constructor(
        private route: ActivatedRoute,
        private service : GithubFollowersService) { }

      ngOnInit() {
        const paramMap = this.route.paramMap;
        const queryParamMap = this.route.queryParamMap;

        combineLatest({
          paramMap, // error here
          queryParamMap
        })
        .subscribe(combined => {
          let id = combined[0].get('id');//the 0 means the 1st 1 which is paramMap from above
          let page = combined[1].get('page');

          this.service.getAll().subscribe(followers => this.followers = followers);
        });


      }

    }

Answer 1

您正在寻找 forkJoin 在多个订阅完成时执行特定代码。这样做的伪逻辑是

forkJoin(
  paramMap.pipe(
    tap(res => {
      allParams["param1"] = res.get("param1");
    })
  ),
  queryParamMap.pipe(
    tap(res => {
      allParams["param1"] = res.get("param2");
    })
  )
).subscribe(res => {
  //call your service
});

Answer 2

如果您使用的是 Angular/RxJS 的当前版本，您的导入应该如下所示：

import { combineLatest, Observable } from 'rxjs';

您看到的错误是 combineLatest 的语法不正确。它应该是这样的：

  combineLatest([
    paramMap,
    queryParamMap
  ])

注意 [] 而不是 {}

此外，给包含 Observable 的变量加上 $ 后缀是一种惯例。

来自 github 条评论：

Static version of combineLatest accepts either an array of Observables or each Observable can be put directly as an argument.

Link 这里：https://github.com/ReactiveX/rxjs/blob/95bd8073e33c39a8f8d4ade8bf15c39a1154a879/src/internal/observable/combineLatest.ts

Answer 3

只需放弃 { }:

        combineLatest(
          paramMap,
          queryParamMap
        )
        .subscribe(combined => {

否 { }，否 [ ]，仅列出要合并的流。

https://www.learnrxjs.io/operators/combination/combinelatest.html

Angular 如何使用 combineLatest 合并来自网站 url 的路由和查询 bar

Angular how to use combineLatest to combine routes and queries from website url bar

rxjs

typescript

angular

combinelatest