Angular - 组合 params 和 queryParams 可观察对象答案

【问题标题】：Angular - Combine params and queryParams observablesAngular - 组合 params 和 queryParams 可观察对象
【发布时间】：2018-01-09 02:54:52
【问题描述】：

如何将这些与可观察对象结合为一个？它们具有相同的功能。

this.sub = this.route.params.subscribe((params: any) => {
    // functionality
});

this.sub = this.route.queryParams.subscribe((params: any) => {
    // same functionality   
});

【问题讨论】：

标签： angular angular-observable

【解决方案1】：

您可以使用combineLatest 来做到这一点：

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

import { combineLatest } from 'rxjs';

// ...

class MyComponent {

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {

    const params = this.route.params;
    const queryParams = this.route.queryParams;

    combineLatest(params, queryParams, (params, qparams) => ({ params, qparams }))
      .subscribe(allParams => console.log(allParams.params, allParams.qparams));
  }

}

params 和 qparams 将以属性名作为参数名，以值作为值的对象。所以对于一条路线：

 RouterModule.forRoot([{
  path: 'test1/:id',
  component: Test1Component
}])

带参数

http://localhost:4200/test1/paramvalue?qparam=qpvalue

allParams 将是

{ 
  params: { 
     id: "paramvalue" 
    },
  qparams: { 
     qparam: "qpvalue" 
    } 
 }

【讨论】：

allParams 存在于 2 个对象“params”和“qparams”内。参数没问题，但 qparams 有参数：“[object Object]”和 qparams:“[object Object]”以及所有其他实际参数
@Michalis 我在答案中添加了更多细节，这两个参数属性都将是对象。
你看到截图了吗？
我没有得到相同的结果。我在 Angular 4.3.1 上。
@maheshkajale 这将导入所有内容。如果您使用的是import { Observable } from 'rxjs/Observable';