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

Posted

技术标签:

【中文标题】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>' 【发布时间】:2018-10-25 11:05:44 【问题描述】:

我已完成将我的应用程序更新到 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'; 【参考方案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);
         );

【讨论】:

以上是关于Angular 6 router.events.filter 'filter' 不存在于类型'Observable<Event>'的主要内容,如果未能解决你的问题,请参考以下文章

Angular JS - 6 - Angular JS 常用指令

Angular 6 有 angular.noop 吗?

如何在 Angular 6 中使用 angular-timelinejs3?

无法将 Angular 从版本 6 降级到 5

从 Angular 5 升级到 Angular 6,Bootstrap 按钮样式没有间距

Angular 6:发送经过身份验证的请求