筛选 angular 导航开始和结束的路由器事件

Question

我需要从路由器事件和运行一些代码中过滤 NavigationEnd 事件，但仅当导航开始事件具有属性 navigationTrigger === 'imperative'.

现在我的代码是这样的：

this.router.events.pipe (
    filter(e => e instanaceof NavigationEnd)
).subscribe(val => {});

我如何更改它以同时发出 NavigationStart 事件并首先检查属性 navigationTrigger 是否具有值 'imperative'.

问题 - 我只想在用户手动触发路由器事件时调用订阅代码，而不是在任何重定向时调用。

Answer 1

您可以使用 switchMap 运算符。您还应该检查导航是否不是 cancelled/errorred，如果它被取消或结束，您可以使用 take(1) 运算符结束内部 switchMap 订阅。我不完全确定是否需要 NavigationCancel/NavigationError 检查。这取决于您的用例

this.router.events.pipe(
  filter((e) => e instanceof NavigationStart && e.navigationTrigger === 'imperative'),
  switchMap(() => this.router.events.pipe(
    filter(e => e instanceof NavigationEnd
      || e instanceof NavigationCancel
      || e instanceof NavigationError
    ),
    take(1),
    filter(e => e instanceof NavigationEnd)
  ))
).subscribe(val => {});

筛选 angular 导航开始和结束的路由器事件

Filter angular router events for navigation start and end

rxjs

angular-ui-router

angular