angular - 带 Angular 路由器的 RXJS - 'mergeMap' 不是函数

Question

我在使用 Angular 路由器和 RxJS 时遇到问题。Angular 4.3.6 和 RxJS 5.2.0 一切正常。

但是当我升级到:

Angular :5.0.3
RxJS:5.5.2

我开始在我的应用程序的不同地方遇到奇怪的错误。例如，看看这段代码。

注意:如您所见，我已经导入了“mergeMap”函数。而且我也没有收到类型为 Observable 的“bla”变量的错误，仅针对 Router.events，它本身就是一个 Observable。

有什么办法解决这个问题吗？

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/mergeMap';
import {Component, OnInit, ViewEncapsulation} from '@angular/core';
import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';

@Component({
  selector: 'pv-app',
  encapsulation: ViewEncapsulation.None,
  template: `
        ....
  `
})

export class PvComponent implements OnInit {

  constructor(private router: Router,
              private activatedRoute: ActivatedRoute) {
  }

  ngOnInit() {
   let bla = Observable.of('hello');
   bla.mergeMap(x=>x); // Works without problems.

   this.router.events
      .filter((event) => event instanceof NavigationEnd)
      .map(() => this.activatedRoute)
      .map((route) => {
        while (route.firstChild) {
          route = route.firstChild
        };
        return route;
      })
      .filter((route) => route.outlet === 'primary')
      .mergeMap((route) => route.data)
      .subscribe((event) => {
          // not relevant
        });
      };
}

我在控制台上收到以下错误。

PvComponent_Host.ngfactory.js:5 ERROR TypeError: 

this.router.events.filter(...).map(...).map(...).filter(...).mergeMap is not a function
    at PvComponent.ngOnInit (pv.component.ts:41)
    at checkAndUpdateDirectiveInline (core.js:12291)
    at checkAndUpdateNodeInline (core.js:13794)
    at checkAndUpdateNode (core.js:13737)
    at debugCheckAndUpdateNode (core.js:14609)
    at debugCheckDirectivesFn (core.js:14550)
    at Object.eval [as updateDirectives] (PvComponent_Host.ngfactory.js:9)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14535)
    at checkAndUpdateView (core.js:13704)
    at callWithDebugContext (core.js:14936)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14473)
    at ViewRef_.detectChanges (core.js:11496)
    at eval (core.js:5982)
    at Array.forEach (<anonymous>)
    at ApplicationRef.tick (core.js:5982)

谢谢，丹尼尔

Answer 1

添加这个:

import 'rxjs/add/operator/mergeMap';