请问仅在路由变化时触发的Angular生命周期事件是什么？

Hey there! Let me break this down for you—first off, the straight answer: Angular doesn’t have a native component lifecycle hook that fires exclusively when routes change. The standard hooks like ngOnInit or ngOnChanges are tied to component initialization or property updates, not route navigation. That’s why your logging didn’t pick up a dedicated "route change" lifecycle event!

But don’t worry—there are two reliable, straightforward ways to listen for route changes, tailored to different scenarios:

1. Listen to Route Parameter/Query Parameter Changes (For Reused Components) #

If your component gets reused across routes (like navigating from /product/101 to /product/102 where the same ProductComponent is used), Angular won’t reinitialize the component—so ngOnInit only runs once. Instead, use ActivatedRoute to subscribe to changes in route params or query params:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { map } from 'rxjs/operators';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html'
})
export class ProductComponent implements OnInit {
  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // Listen for changes to the 'productId' route parameter
    this.route.params.pipe(
      map(params => params['productId'])
    ).subscribe(productId => {
      console.log('Product ID updated via route:', productId);
      // Run your route-specific logic here (e.g., fetch new product data)
    });

    // Optional: Listen for query parameter changes (e.g., ?view=details)
    this.route.queryParams.subscribe(queryParams => {
      console.log('Query parameters changed:', queryParams);
    });
  }
}

2. Listen to Global Router Events (For Any Route Change) #

If you need to detect any route navigation (even when components are swapped out entirely), use the Router service to listen to its events stream. The most useful event here is NavigationEnd, which fires once the route navigation is fully completed:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-nav-bar',
  templateUrl: './nav-bar.component.html'
})
export class NavBarComponent implements OnInit, OnDestroy {
  // Use this to clean up subscriptions when the component is destroyed
  private destroy$ = new Subject<void>();

  constructor(private router: Router) {}

  ngOnInit(): void {
    this.router.events.pipe(
      // Only target the NavigationEnd event (skip intermediate navigation steps)
      filter(event => event instanceof NavigationEnd),
      // Auto-unsubscribe when the component is destroyed to avoid memory leaks
      takeUntil(this.destroy$)
    ).subscribe((event: NavigationEnd) => {
      console.log('Route changed to:', event.url);
      // Update UI or run logic (e.g., highlight the active navigation link)
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

Quick Tips: #

• Always clean up subscriptions (using takeUntil, the async pipe, or manual unsubscribing) to prevent memory leaks.
• If you need to run logic before a route changes (like confirming unsaved changes), check out Angular’s route guards like CanActivate or CanDeactivate—these aren’t component lifecycle hooks, but they’re critical parts of the routing lifecycle.

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