在 Angular 12 中过滤 NavigationEnd 事件？

Question

在 Angular 11 中有效：

this.r.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map((event: NavigationEnd) => event.url == ROUTES.APPLICATION))

但是在 Angular 12 中它会产生错误：

Argument of type 'MonoTypeOperatorFunction<Event_2>' is not assignable to parameter of type 'OperatorFunction<Event_2, NavigationEnd>'.
Type 'Observable<Event_2>' is not assignable to type 'Observable'.
Type 'Event_2' is not assignable to type 'NavigationEnd'.
Property 'urlAfterRedirects' is missing in type 'RouterEvent' but required in type 'NavigationEnd'.ts(2345)

关于如何解决这个问题有什么想法吗？

的答案是添加：

"paths": {
    "rxjs": [
      "node_modules/rxjs"
    ],
    "rxjs/*": [
      "node_modules/rxjs/*"
    ]
}

到tsconfig.json。但是那没有用...

Answer 1

更新：做了 Google，这看起来很有希望。看起来像是我在下面提到的类型谓词的紧凑形式。 (Source)

filter((event): event is NavigationEnd => event instanceof NavigationEnd))

了解 .filter(event => event instanceof NavigationEnd)

中 event 参数的初始类型真的很有帮助

您的 IDE 中是否安装了 TypeScript 插件？至少在 VSCode 和 Atom 中，插件可以在您编写代码时显示内联变量的类型。这将帮助您找出不匹配的地方。

如果 event => event instanceof NavigationEnd 不足以阻止 TS 在下一行的类型断言 (event: NavigationEnd) 上吐槽，那么也许 type predicate 会有所帮助？

在 Angular 12 中过滤 NavigationEnd 事件？

Filtering for NavigationEnd events in Angular 12?

javascript

rxjs

typescript

angular

angular-router