Angular2无组件路由：监听NavigationStart并终止后续路由事件

Hey there! Let's get this sorted out for you. To stop the router from firing those follow-up events (like RoutesRecognized, GuardsCheckStart, etc.) when navigating to /logout, we just need to cancel the current navigation as soon as we detect the /logout URL in the NavigationStart event. Here's how to tweak your code:

Step-by-Step Fix #

1. Add the RxJS Filter Import #

First, make sure you import the filter operator since we'll use it to target only NavigationStart events.

2. Cancel the Navigation with event.preventDefault() #

When the URL matches /logout, calling event.preventDefault() tells Angular's router to abort the entire navigation process immediately. This stops all subsequent router events from firing, and you won't need a component for /logout at all.

3. Fill in Your Logout Logic #

Add your actual logout tasks (like clearing auth tokens, resetting user state) to the logout() method. You can also optionally redirect the user to a login page afterward.

Updated Full Code #

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart } from '@angular/router';
import { filter } from 'rxjs/operators'; // Don't forget this import!

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  constructor(
    private router: Router,
  ) {
    router.events
      .pipe(filter(event => event instanceof NavigationStart))
      .subscribe((event: NavigationStart) => {
        if (event.url === '/logout') {
          // Cancel the navigation to halt all subsequent router events
          event.preventDefault();
          // Run your custom logout operations
          this.logout();
        }
      });
  }

  ngOnInit() { }

  logout() {
    // Example logout tasks - replace with your own logic:
    localStorage.removeItem('authToken'); // Clear auth token
    sessionStorage.clear(); // Reset session data
    this.router.navigate(['/login']); // Optional: Redirect to login page
  }
}

Key Details to Remember #

• Why event.preventDefault() works: This method aborts the navigation before the router tries to resolve a component or trigger any further events. No extra route configuration for /logout is needed.
• Optional Redirect: After logout, using this.router.navigate() will trigger a fresh, valid navigation flow—this is totally safe and won't conflict with the canceled /logout navigation.

内容的提问来源于stack exchange，提问作者KaiserKatze