时间戳

首页 > 解决方案 > 在 Angular 12 中过滤 NavigationEnd 事件？

javascript - 在 Angular 12 中过滤 NavigationEnd 事件？

问题描述

在 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”类型中是必需的。ts（2345）

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

这个问题的答案是：

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

到tsconfig.json. 然而这并没有奏效......

标签： javascriptangulartypescriptrxjsangular-router

解决方案

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

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) 大喊大叫，那么类型谓词可能会有所帮助吗？

推荐阅读