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-timelinejs3?