订阅路由数据和参数答案

【问题标题】：Subscribe to both route data and params订阅路由数据和参数
【发布时间】：2018-07-27 02:33:41
【问题描述】：

我正在尝试在 Angular 中同时订阅路由数据和路由参数。我正在使用Observable.zip，但不幸的是，当我切换路由时订阅功能不会触发（我有路由 A、B、C 和 D，它们在 URL 中有一个参数）。

我的代码如下：

ngOnInit() {
    this.subscription = Observable.zip(this.route.data, this.route.params)
      .subscribe(([data, params]) => {
         // do something...
      });
  }

但是，当我使用这些代码时：

this.route.params.subscribe((data) => {
  // do something...
})

一切正常，我可以订阅参数。我想只使用一个订阅来做到这一点。

【问题讨论】：

Subscribe to both route params and queryParams in Angular 2的可能重复

标签： angular rxjs

【解决方案1】：

您可以使用 forkJoin 做到这一点，如下所示：

const combined = Observable.forkJoin(
  this.route.data,
  this.route.params
)

combined.subscribe(latestValues => {
    const [ route_data , route_params ] = latestValues;
    console.log( "route_data" , route_data);
    console.log( "route_params" , route_params);
});

【讨论】：

【解决方案2】：

zip 运算符仅在所有源 Observable 发出相同数量的项目时才会发出。

看起来你最好使用combineLatest，它会在所有源 Observables 发射至少一个项目之后发射，然后在每次发射时发射。

您还可以附加startWith 并将combineLatest 初始化为nulls。

Observable.combineLatest(
  this.route.data.startWith(null),
  this.route.params.startWith(null),
  (data, params) => {
    ...
  }
).subscribe(...);

【讨论】：