'Observable<Event>' 类型不存在属性 'distinctUntilChanged'答案

【问题标题】：Property 'distinctUntilChanged' does not exist on type 'Observable<Event>''Observable<Event>' 类型不存在属性 'distinctUntilChanged'
【发布时间】：2019-03-16 11:17:53
【问题描述】：

尝试从 Angular 5 升级到 Angular 6 并收到此错误：

src/app/app.component.ts(26,23) 中的错误：错误 TS2339：属性 “可观察”类型上不存在“distinctUntilChanged”。

我在 app.module.ts 中导入了 distinctUntilChanged：

import "rxjs/add/operator/distinctUntilChanged";

还有我在 app.component.ts 中的代码：

import { Component } from "@angular/core"; import { Router, NavigationEnd } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { GeoService } from "app/services/geo.service";
import { ArbeteService } from "app/services/arbete.service";
import { GoogleAnalyticsEventsService } from "app/services/google-analytics-events.service";

import * as _ from "lodash";

@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"]
})
export class AppComponent {

        //Send pageview to Google Analytics
        router.events.distinctUntilChanged((previous: any, current: any) => {
        if (current instanceof NavigationEnd) {
            return previous.url === current.url;
        }
        return true;
    }).subscribe((x: any) => {
        googleAnalytics.emitVirtualPageView("Rekryteringsguiden", "Rekryteringsguiden");
    });

我在这里错过了什么？

【问题讨论】：

标签： angular angular5 angular6 rxjs5 rxjs6

【解决方案1】：

import { distinctUntilChanged } from 'rxjs/operators';

router.events.pipe(distinctUntilChanged((previous: any, current: any) => {})).subscribe();

【讨论】：

【解决方案2】：

对于 Angular 6，大多数 RxJS 运算符的语法都会发生变化。

要导入它，请使用：

import { catchError } from 'rxjs/operators';

但是调用必须用pipe包裹，像这样：

    router.events
        .pipe(
            distinctUntilChanged((previous: any, current: any) => {
                if (current instanceof NavigationEnd) {
                    return previous.url === current.url;
                }
                return true;
            })).subscribe((x: any) => {
                googleAnalytics.emitVirtualPageView("Rekryteringsguiden", "Rekryteringsguiden");
});

【讨论】：

【解决方案3】：

从 rxjs 5.5 导入操作符

import { distinctUntilChanged } from 'rxjs/operators';

【讨论】：