在 Angular 12 中过滤 NavigationEnd 事件？

Question

在 Angular 11 中，这是有效的：

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

然而在 Angular 12 中它会产生错误：

“MonoTypeOperatorFunction<Event_2>”类型的参数不可分配给“OperatorFunction<Event_2, NavigationEnd>”类型的参数。
类型“Observable<Event_2>”不可分配给类型“Observable”。
类型“Event_2”不可分配给类型“NavigationEnd”。
“RouterEvent”类型中缺少属性“urlAfterRedirects”，但“NavigationEnd”类型中需要属性“urlAfterRedirects”。ts(2345)

有想法该怎么解决这个吗？

这个问题的答案是添加：

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

到tsconfig.json。然而这没有用......

Answer 1

更新：谷歌了一下，这看起来很有希望。看起来像我下面提到的类型谓词的紧凑形式。（来源）

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

event了解参数的初始类型确实很有帮助.filter(event => event instanceof NavigationEnd)

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

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