Angular 6 路由器事件过滤器 'filter' 在类型 'Observable<Event>' 上不存在

Question

我已经把我的应用程序更新到了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：类型“Observable”上不存在属性“filter”。

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

谢谢

- Anouar Mokhtari

---

导入'rxjs/add/operator/filter'。 - Roberto Zvjerković

我使用RXJS 6: import { filter } from 'rxjs/operators'; - Anouar Mokhtari

Answer 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 运算符代替尝试在可观察对象上链式调用 filter。

- Lansana Camara

---

这适用于 RxJS 6，需要使用新的操作符 pipe。对于 RxJS 5，您可以参考 @ritaj 的评论：import 'rxjs/add/operator/filter'。 - Phuc Thai

感谢@Lansana提供的解决方案！我升级到6后，我的服务停止工作了。 - Andrew Lobban

请问您如何访问该事件的URL属性？我无法访问它。 - Hope

@Hope 尝试在事件对象上使用 console.log(...)，看看你可以访问哪些属性。 - Lansana Camara

Answer 2

我看不到你的代码中是否导入了过滤器。

对于 Rxjs 6：

import { filter } from 'rxjs/operators';

    .
    .
    .

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

- Patricio Vargas

Answer 3

激活的路由没有给我提供url。所以我尝试了这个。 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);
         });

- Rincy Philip