Angular：更改单个路线会发出多个“NavigationEnd”事件

路由器

Angular是一种流行的前端开发框架，用于构建现代化的Web应用程序。它提供了许多强大的功能，包括路由功能，用于管理应用程序的不同页面之间的导航。然而，最近有一个关于Angular路由的问题引起了一些开发者的关注，这就是当更改单个路线时，会发出多个“NavigationEnd”事件的问题。

问题描述：

在Angular中，当我们在应用程序中导航到不同的页面时，通常会使用路由器来处理这个过程。当导航完成时，Angular会发出一个名为“NavigationEnd”的事件，我们可以订阅这个事件来执行一些特定的操作。然而，最近的一些开发者发现，当他们更改单个路线时，会收到多个连续的“NavigationEnd”事件，这与他们预期的不符。

问题分析：

经过一些调查和研究，开发者们发现这个问题的原因是Angular的路由器在处理导航时会发出多个事件。具体来说，当我们导航到一个新的页面时，路由器会发出一个“NavigationStart”事件，然后在加载页面的过程中，可能会发出多个“RouteConfigLoadStart”和“RouteConfigLoadEnd”事件。最后，当页面加载完成并准备好显示时，路由器会发出一个“RoutesRecognized”事件，然后才是最终的“NavigationEnd”事件。

问题的影响：

这个问题的影响在于，开发者们可能会在处理导航事件时遇到困惑。例如，他们可能会在“NavigationEnd”事件的处理程序中执行一些特定的操作，但由于收到了多个事件，这些操作可能会被重复执行多次，导致意想不到的结果。

解决方案：

为了解决这个问题，开发者们可以采取一些策略来过滤掉多余的事件。其中一种方法是使用rxJS中的操作符来过滤掉不需要的事件。例如，我们可以使用“filter”操作符来只保留最后一个“NavigationEnd”事件，忽略之前的所有事件。

下面是一个简单的示例代码，展示了如何使用rxJS操作符来解决这个问题：

typescript
import { filter } from 'rxJS/operators';
import { NavigationEnd, Router } from '@angular/router';
@Component({
  selector: 'app-example',
  template: '...'
})
export class ExampleComponent implements OnInit {
  constructor(private router: Router) { }
  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      // 在这里添加其他操作符或处理程序
    ).subscribe((event: NavigationEnd) => {
      // 处理导航完成的操作
    });
  }
}

在上面的代码中，我们使用了rxJS的“filter”操作符来过滤出只有“NavigationEnd”事件的流。这样，我们就只会收到最后一个导航完成的事件，避免了重复执行操作的问题。

：

虽然在Angular中更改单个路线会发出多个“NavigationEnd”事件可能会导致一些困惑，但我们可以通过使用rxJS操作符来解决这个问题。通过过滤掉多余的事件，我们可以确保只有最后一个导航完成的事件被处理，避免了意外的重复操作。这个解决方案可以帮助开发者们更好地管理和处理Angular应用程序中的导航事件，提高开发效率。

参考资料：

- [Angular: 更改单个路线会发出多个“NavigationEnd”事件](https://stackoverflow.com/questions/51807432/angular-changing-single-route-emits-multiple-navigationend-events)