Angular 12 Router导航后WebSocket更新数据时组件视图不同步问题

问题根因 #

你遇到的这个问题核心是两个常见的Angular开发误区叠加导致的：

1. STOMP订阅没有在组件销毁时取消，导致内存泄漏：你每次进入/employees页面都会新增一个websocket订阅，导航离开页面时组件实例被销毁，但订阅没有被释放，收到服务端消息后会触发已经销毁的旧组件实例的回调逻辑，此时Angular不会为已销毁的组件触发变更检测。
2. 数组原地更新未触发*ngFor变更检测：你用push方法原地修改数组，数组本身的引用没有发生变化，如果组件启用了ChangeDetectionStrategy.OnPush策略，*ngFor不会识别到数据变更，自然不会更新视图。
   你遇到的手动触发操作能更新UI，是因为手动交互会触发当前活跃组件的变更检测周期，临时拉取到最新的模型数据，但websocket回调本身还是没有进入Angular的变更检测上下文。

解决方案 #

第一步：修复订阅泄漏，在组件销毁时取消STOMP订阅 #

STOMP的subscribe方法会返回一个取消订阅的函数，你需要在组件的ngOnDestroy生命周期钩子中调用它释放资源：

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';

// 组件内部代码
private stompUnsubscribe?: () => void;
employees: Employee[] = [];

constructor(private ngZone: NgZone) {}

ngOnInit(): void {
  const callback = (message: Message) => {
    const e: Employee = JSON.parse(message.body);
    // 将数据更新逻辑包在NgZone.run中，确保进入Angular变更检测上下文
    this.ngZone.run(() => {
      // 不要用push原地修改，返回新的数组引用触发*ngFor检测
      this.employees = [...this.employees, e];
    });
  };
  // 保存取消订阅的方法
  this.stompUnsubscribe = this.stompClient.subscribe(uri, callback, headers);
}

ngOnDestroy(): void {
  // 离开页面时取消订阅，避免旧回调执行
  this.stompUnsubscribe?.();
}

第二步：修复路由配置语法错误 #

你提供的app-routing.module代码里employees路径缺了引号和逗号，先修正这个语法问题：

const routes: Routes = [
  {
    path: 'employees', // 补全引号
    canActivate: [CanActivateRoute], // 补全逗号
    loadChildren: () => import('./modules/employee/employee.module').then(mod => mod.EmployeeModule)
  }
];

第三步：修正STOMP客户端初始化上下文 #

如果上述操作后还是有问题，把STOMP客户端的初始化逻辑也包在NgZone.run中，确保整个websocket的回调上下文都在Angular的Zone管辖范围内：

this.ngZone.run(() => {
  // 此处替换为你自己的STOMP客户端初始化逻辑
  this.stompClient = Stomp.over(new SockJS('/your-websocket-endpoint'));
  this.stompClient.connect(headers, () => {
    // 连接成功后的订阅逻辑也写在这里
  });
});

按照上述步骤操作后就能解决导航后视图不更新的问题，不需要重载页面。

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