Angular 6 router.events.filter 'filter' 不存在于类型'Observable<Event>'答案

【问题标题】：Angular 6 router.events.filter 'filter' does not exist on type 'Observable<Event>'Angular 6 router.events.filter 'filter' 不存在于类型'Observable<Event>'
【发布时间】：2026-01-25 16:05:01
【问题描述】：

我已完成将我的应用程序更新到 Angular 6（它是 5.2 版本）。

我在 :

中遇到错误语法

import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
...
constructor(private router: Router) {}

this.router.events.filter
      (event => event instanceof NavigationEnd).subscribe((res) => 
    {
      // DO something
    });

错误 TS2339：类型上不存在属性“过滤器” “可观察”。

Angular 6 中的正确语法是什么？

谢谢

【问题讨论】：

导入 'rxjs/add/operator/filter'
我使用 RXJS 6: import { filter } from 'rxjs/operators';

标签： angular typescript rxjs angular6 rxjs6

【解决方案1】：

这是使用 Angular 6+ 和最新的 RxJS 过滤路由器事件的方法：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, NavigationEnd } from '@angular/router';

import { filter } from 'rxjs/operators';

export class MyComponent implements OnInit {
    constructor(private router: Router, private activatedRoute: ActivatedRoute) {}

    ngOnInit() {
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd)
        ).subscribe(() => {
            console.log(this.activatedRoute.root);
        });
    }
}

使用pipe 运算符，而不是尝试对可观察对象进行链式过滤。

【讨论】：

这适用于具有新的必需操作员管道的 RxjS 6。对于 RxJS 5，你可以参考@ritaj 的评论：import 'rxjs/add/operator/filter'
感谢@Lansana 的解决方案！我升级到 6，我的服务停止工作。
你能告诉我如何访问该事件的 url 属性，我无法访问它
@Hope 在事件对象上尝试console.log(...)，看看您可以访问哪些属性。

【解决方案2】：

如果您导入了过滤器，我在您的代码中看不到

对于 Rxjs 6：

import { filter } from 'rxjs/operators';

    .
    .
    .

     this.router.events.pipe(
       filter((event:Event) => event instanceof NavigationEnd)
     ).subscribe(res => console.log(res))

【讨论】：

【解决方案3】：

Activated Route 没有给我网址。所以我尝试了这个。 P.S: event['url'] 代替 event.url

import { filter } from 'rxjs/operators';
import { Router,NavigationEnd } from '@angular/router';

 router.events.pipe(filter(event => event instanceof NavigationEnd))
        .subscribe(event => 
         {
            this.currentRoute = event['url'];          
            console.log(this.currentRoute);
         });

【讨论】：