如何在 Angular 5 中使用 combineLatest 和 takeUntil rxjs 运算符

Question

我看到在 Angular 5 中应该以不同的方式使用 rxjs 运算符并从 'rxjs/operators' 导入，但我不太清楚它应该如何工作。我有类似的东西：

import { Observable } from 'rxjs/Observable';

import { combineLatest, takeUntil } from 'rxjs/operators';

@Component({ ... })
export class FooComponent implements OnInit, OnDestroy {


  constructor(private route: ActivatedRoute) {}


  ngOnInit() {

    this.route_data = Observable.combineLatest(this.route.params, this.route.data,
                             (params, data) => ({params,data}));

    this.route_data_sub = this.route_data.takeUntil(this.destroyed$).subscribe(
      (params_and_data) => {
                            ...
                           }
   }
 ...
}

但我收到 Observable.combineLatest is not a function 错误。如果我以旧方式添加 combineLatest 运算符，它适用于 combineLatest，但现在找不到 takeUntil。 Angular 5 应该怎么做？

我在整个应用程序中都有相当多的 rxjs 代码，但不知道应该如何重写它或如何更改导入。现在是否必须用 .pipe() 重写所有内容？

Answer 1

您应该导入 combileLatest 使用

import { combineLatest } from 'rxjs/observable/combineLatest';

对于takeUntil

import { takeUntil } 'rxjs/operators';

我找到了那个信息：

combineLatest
takeUntil

Answer 2

@Mad Dandelion 的答案是正确的，但我认为值得向运行遇到同一件事的任何人展示将它组合在一起的样子。你必须通过管道传递 takeUntil 之类的东西。通过一个大型应用程序并找到所有这些地点有点痛苦，但不会花那么长时间。看起来也没有那么糟糕，并且拥有 "why" 下 https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md 的所有优点。

import { Observable } from 'rxjs/Observable';
import { combineLatest } from 'rxjs/observable/combineLatest';
import { takeUntil } from 'rxjs/operators';


@Component({ ... })
export class FooComponent implements OnInit, OnDestroy {


  constructor(private route: ActivatedRoute) {}


  ngOnInit() {

    this.route_data = combineLatest(this.route.params,
                                    this.route.data,
                                    (params, data) => ({params,data})
                                   );

    this.route_data_sub = this.route_data
                           .pipe(takeUntil(this.destroyed$)) //<-- pipe()
                           .subscribe((params_and_data) => {
                            ...
                           })
   }
 ...
}

同样在我的例子中，我有一些陈旧的 dll 服务于旧的 rxjs (https://webpack.js.org/plugins/dll-plugin/) 所以如果你运行进入看起来像你的 Observables 没有管道的东西属性]，如果使用它，您可能需要确保 dll 构建正确。

如何在 Angular 5 中使用 combineLatest 和 takeUntil rxjs 运算符

How to use combineLatest and takeUntil rxjs operators in Angular 5

rxjs5

angular5