Angular中WebSocket更新数组但视图不刷新，路由切换后新消息不显示

核心问题根源 #

1. 路由切换后消息丢失：组件随路由切换销毁重建时，原WebSocket订阅被取消，且消息未全局持久化，回到/home页面后只能获取组件初始化时的旧数据。
2. 视图不同步：代码存在低级错误（this.dataResponse应为dataResponse），且直接赋值数组可能无法触发Angular变更检测，另外组件未妥善处理WebSocket连接的生命周期。

解决方案步骤 #

1. 用单例服务管理WebSocket与消息存储

组件会随路由销毁，而服务是全局单例，可持久化保存消息并维护WebSocket连接：

// notification.service.ts
import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { retry, share } from 'rxjs/operators';

@Injectable({ providedIn: 'root' })
export class NotificationService {
  private wsSubject: WebSocketSubject<any>;
  private notificationList: any[] = [];
  private url = 'ws://localhost:8081';

  // 供组件订阅的消息流
  get notifications$() {
    return this.connect().pipe(share()); // 多组件共享同一连接
  }

  // 获取当前最新消息列表
  get currentNotifications() {
    return [...this.notificationList]; // 返回副本，避免外部修改内部状态
  }

  private connect(): WebSocketSubject<any> {
    if (!this.wsSubject || this.wsSubject.closed) {
      this.wsSubject = webSocket(this.url);
      this.wsSubject.pipe(retry(3000)).subscribe({
        next: (data) => this.notificationList = data,
        error: (err) => console.error('WS连接失败:', err),
        complete: () => console.log('WS连接关闭')
      });
    }
    return this.wsSubject;
  }

  // 注销时关闭连接
  closeConnection() {
    this.wsSubject?.complete();
  }
}

2. 组件中订阅服务并处理变更检测

在Home组件中依赖服务获取消息，确保路由切换后仍能拿到最新数据：

// home.component.ts
import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import { NotificationService } from './notification.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, OnDestroy {
  notificationList: any[] = [];
  counter = 0;
  private notificationSub: Subscription;

  constructor(
    private notificationService: NotificationService,
    private cdr: ChangeDetectorRef // 若用OnPush变更检测则需此
  ) {}

  ngOnInit() {
    // 初始化时先加载已保存的消息
    this.notificationList = this.notificationService.currentNotifications;
    this.counter = this.notificationList.length;

    // 订阅新消息更新
    this.notificationSub = this.notificationService.notifications$.subscribe(data => {
      this.notificationList = [...data]; // 用扩展运算符创建新数组，触发变更检测
      this.counter = data.length;
      // 若组件用OnPush，手动触发检测：this.cdr.markForCheck();
    });
  }

  ngOnDestroy() {
    // 取消组件订阅，避免内存泄漏
    this.notificationSub?.unsubscribe();
  }
}

3. 修复HTML与代码错误

• 修正原TS代码中this.dataResponse的笔误，改为dataResponse；
• HTML中补充消息内容的渲染（原代码<li>为空）：

<button mat-button #menuTrigger="matMenuTrigger" [matMenuTriggerFor]="notifications">
  <mat-icon [matBadge]="counter" [matBadgeHidden]="counter < 1" matBadgeColor="warn">notifications</mat-icon>
</button>
<mat-menu #notifications="matMenu">
  <ul>
    <li *ngFor="let item of notificationList; let i = index">
      {{ item.title }} - {{ item.content }} <!-- 根据实际消息结构渲染 -->
    </li>
  </ul>
</mat-menu>

关键优化点 #

• 连接复用：用share()操作符避免多组件重复创建WebSocket连接；
• 状态持久化：服务全局存储消息，组件重建时直接读取最新状态；
• 变更检测：通过不可变数组赋值（[...data]）确保Angular捕获到数据变化；
• 生命周期管理：组件销毁时取消订阅，用户注销时关闭WebSocket连接。

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