Angular中点击浏览器前进/后退时更新组件内容的问题

嘿，我一眼就看出问题所在了——你每次触发popstate事件时，都会新建一个router.events的订阅，但从来没取消过这些订阅，导致它们不断累积，所以每点一次后退，updateContent的触发次数就会多一次！

问题根源拆解 #

在你的detectPopState方法里，每次浏览器触发popstate（比如点击后退），你就会订阅一次router.events。第一次后退时加了1个订阅，第二次后退又加1个，此时总共有2个订阅在监听NavigationEnd，所以updateContent会触发2次，以此类推，次数越来越多。

两种可行的解决方案 #

方案1：用RxJS的takeUntil管理订阅（推荐）

这是Angular中管理订阅最规范的方式，利用takeUntil操作符，在组件销毁时自动取消所有订阅，同时避免嵌套订阅的混乱：

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

@Component({
  selector: 'app-dashboard',
  template: 'Read in console'
})
export class DashboardComponent implements OnInit, OnDestroy {
  page: number = 1;
  private destroy$ = new Subject<void>(); // 用于触发订阅销毁

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location
  ) { }

  ngOnInit() {
    this.setupRouteListener();
    // 保留你的模拟操作
    setTimeout(() => this.goToPage(1), 1000);
    setTimeout(() => this.goToPage(2), 2000);
    setTimeout(() => this.goToPage(3), 3000);
    setTimeout(() => this.goToPage(4), 4000);
    setTimeout(() => window.history.back(), 5000);
    setTimeout(() => window.history.back(), 6000);
    setTimeout(() => window.history.back(), 7000);
  }

  ngOnDestroy() {
    // 组件销毁时通知所有订阅取消
    this.destroy$.next();
    this.destroy$.complete();
  }

  setupRouteListener() {
    // 直接监听路由的NavigationEnd事件，覆盖所有路由变化场景
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.destroy$) // 组件销毁时自动取消订阅
    ).subscribe(() => {
      const pageFromParams = this.activatedRoute.snapshot.queryParams.page;
      if (pageFromParams) {
        this.page = +pageFromParams; // 转成数字类型
        this.updateContent();
      }
    });

    // 如果你需要单独处理popstate事件，也可以保留，但其实上面的监听已经足够
    this.location.subscribe((popStateEvent: PopStateEvent) => {
      if (popStateEvent.type === 'popstate') {
        const pageFromParams = this.activatedRoute.snapshot.queryParams.page;
        if (pageFromParams) {
          this.page = +pageFromParams;
          this.updateContent();
        }
      }
    });
  }

  updateContent() {
    console.log('Update content ' + this.page);
  }

  goToPage(page: number) {
    this.page = page;
    this.router.navigate(['/dashboard'], { queryParams: { page: this.page } });
    this.updateContent();
  }
}

方案2：手动取消之前的订阅

如果你不想用RxJS操作符，也可以在每次新建订阅前，手动取消上一次的订阅：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Location, PopStateEvent } from '@angular/common';
import { ActivatedRoute, Event, NavigationEnd, Router } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-dashboard',
  template: 'Read in console'
})
export class DashboardComponent implements OnInit, OnDestroy {
  page: number = 1;
  private routerSub: Subscription | null = null; // 保存订阅引用

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
    private location: Location
  ) { }

  ngOnInit() {
    this.detectPopState();
    // 模拟操作不变
    setTimeout(() => this.goToPage(1), 1000);
    setTimeout(() => this.goToPage(2), 2000);
    setTimeout(() => this.goToPage(3), 3000);
    setTimeout(() => this.goToPage(4), 4000);
    setTimeout(() => window.history.back(), 5000);
    setTimeout(() => window.history.back(), 6000);
    setTimeout(() => window.history.back(), 7000);
  }

  ngOnDestroy() {
    // 组件销毁时最后清理一次
    if (this.routerSub) {
      this.routerSub.unsubscribe();
    }
  }

  detectPopState() {
    this.location.subscribe((popStateEvent: PopStateEvent) => {
      if (popStateEvent.type === 'popstate') {
        // 先取消上一次的订阅，避免累积
        if (this.routerSub) {
          this.routerSub.unsubscribe();
        }
        // 新建订阅
        this.routerSub = this.router.events.subscribe((event: Event) => {
          if (event instanceof NavigationEnd) {
            this.page = this.activatedRoute.snapshot.queryParams.page;
            this.updateContent();
          }
        });
      }
    });
  }

  updateContent() {
    console.log('Update content ' + this.page);
  }

  goToPage(page: number) {
    this.page = page;
    this.router.navigate(['/dashboard'], { queryParams: { page: this.page } });
    this.updateContent();
  }
}

更简洁的优化思路 #

其实你完全不需要同时监听popstate和router.events——Angular的router.events已经能捕获所有路由变化，包括浏览器前进后退导致的变化。所以可以简化成只监听NavigationEnd事件：

setupRouteListener() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    takeUntil(this.destroy$)
  ).subscribe(() => {
    const pageParam = this.activatedRoute.snapshot.queryParams.page;
    // 只有当page参数变化时才更新，避免重复触发
    if (pageParam && +pageParam !== this.page) {
      this.page = +pageParam;
      this.updateContent();
    }
  });
}

这样不管是通过代码跳转还是浏览器按钮操作，只要page参数变化，就会触发内容更新，而且不会有订阅累积的问题。

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