Angular 路由器事件：NavigationEnd -- 如何仅过滤最后一个事件

Question

我只想从 router.events 中提取 类型 NavigationEnd 的最后一个事件条目。但不知何故，我找不到合适的方法来做到这一点。无论我尝试以下代码片段是访问这些感兴趣的对象的唯一方法。

let ne: any;

router.events.filter(e => e instanceof NavigationEnd)
   .forEach(e => {
      ne = e as NavigationEnd;                 
   });

console.log('target page: ', ne.urlAfterRedirects);

但是我真的必须使用 .forEach() 让它运行通过所有条目然后使用最后一个条目吗？有没有更好的方法将事件作为一种数组处理然后说

ne = arrayOfEvents[arrayOfEvents.length-1]

?

我快看疯了，但好像只见树木不见森林...

Answer 1

好吧，在阅读了上面发布的文章并重新思考我真正想要实现的目标之后，我发现我的方法肯定太复杂了。因为实际上我只需要访问当前调用的路由。所以我从头开始，遇到了这个小但非常有效的解决方案：

this.router.events.subscribe(value => {
    console.log('current route: ', this.router.url.toString());
});

感谢所有分享评论或支持我的人！它帮助了我很多，因为我能够解决未解决的问题。

Answer 2

PS。有一种更好的方法可以使用 instanceof typeguard 进行过滤，然后您无需再次断言即可获得正确的类型：

this.firstChildData$ = this.router.events.pipe(
  filter((e): e is NavigationEnd => e instanceof NavigationEnd),
  map(e => {
    // e is now NavigationEnd
  })
);

Answer 3

如果您使用的是 ngrx 效果，那么您可以创建一个监听路由器事件的效果：

import { NavigationEnd, Router } from '@angular/router';

routeTo$ = createEffect(
    () =>
        this.router.events.pipe(
            filter(event => event instanceof NavigationEnd),
            withLatestFrom(this.observable1$, this.observable1$),
            tap(([routerEvent, observable11Value, observable12Value]) => {
                if (this.router.url.includes(observable11Value) && !this.router.url.includes(observable12Value)) {
                    this.router.navigate([`/home/${observable11Value}`]);
                }
            })
        ),
    { dispatch: false }
);

Answer 4

this.router.events.subscribe(value => {
        if(value instanceof NavigationEnd)    
          console.log(this.router.url.toString());
        });

Angular 路由器事件：NavigationEnd -- 如何仅过滤最后一个事件

Angular Router Events: NavigationEnd -- How to filter only the last event

typescript

angular-routing

angular