Angular Router 事件：NavigationEnd——如何仅过滤最后一个事件

typescript

Angular Router 是Angular框架中用于管理页面导航的核心模块。它允许开发者定义导航规则，并在页面之间进行切换。Angular Router 会触发各种事件，以便我们可以在特定的导航操作发生时执行一些逻辑。其中一个常用的事件是 NavigationEnd，该事件在导航完成时触发。但有时候我们只关心最后一次导航的完成事件，而忽略之前的导航事件。本文将介绍如何仅过滤出最后一个 NavigationEnd 事件，并提供一个案例代码来说明这个问题。

首先，让我们简要了解一下 NavigationEnd 事件。当用户在应用中进行导航操作时，Angular Router 会触发一系列的事件，包括 NavigationStart、NavigationCancel、NavigationError 和 NavigationEnd 等。其中 NavigationEnd 事件表示导航成功完成。它提供了一些有用的信息，如导航到的目标路由以及导航操作所花费的时间等。

然而，在某些情况下，我们只对最后一次导航的完成事件感兴趣。比如，在一个单页应用中，当用户点击不同的导航链接时，我们可能只想执行一次特定的逻辑，而不是每次导航都执行。这时候，我们就需要过滤出最后一个 NavigationEnd 事件。

为了实现这个目标，我们可以使用 Angular Router 提供的事件订阅机制。我们可以在应用初始化时订阅 NavigationEnd 事件，然后通过一些逻辑来过滤出最后一个事件。下面是一个简单的示例代码：

typescript
import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-root',
  template: <code>
    <h1>Angular Router NavigationEnd Example</h1>
  </code>,
  styles: []
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}
  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 过滤出最后一个 NavigationEnd 事件
        if (!this.router.navigating) {
          // 执行你的逻辑代码
          console.log('最后一个 NavigationEnd 事件');
        }
      }
    });
  }
}

在上面的代码中，我们在 AppComponent 的 ngOnInit 方法中订阅了 Router 的 events 事件流。然后我们通过判断事件类型来过滤出 NavigationEnd 事件。但我们还需要使用 this.router.navigating 属性来判断是否是最后一个 NavigationEnd 事件。这是因为 Router 的 events 事件流中还会包含其他类型的事件，如 NavigationStart、NavigationCancel 和 NavigationError 等。只有在 this.router.navigating 为 false 的情况下，才表示最后一个 NavigationEnd 事件。

案例代码说明

在上述示例代码中，我们创建了一个名为 AppComponent 的组件，并在其中订阅了 Router 的 events 事件流。在事件订阅的回调函数中，我们首先判断事件类型是否是 NavigationEnd，然后再判断 this.router.navigating 是否为 false。如果是最后一个 NavigationEnd 事件，我们可以执行一些自定义的逻辑代码。

这只是一个简单的示例，你可以根据实际需求来扩展和修改代码。通过过滤最后一个 NavigationEnd 事件，我们可以更好地控制导航操作的逻辑，提供更好的用户体验。

本文介绍了如何仅过滤出最后一个 Angular Router 事件中的 NavigationEnd 事件。我们通过订阅 Router 的 events 事件流，并结合一些逻辑判断，成功过滤出了最后一个导航完成事件。这个技巧可以帮助我们在开发中更好地控制导航操作的逻辑，并提供更好的用户体验。希望本文对你有所帮助，谢谢阅读！