Angular中浏览器历史返回后Canvas已绘制图形不显示问题排查

你遇到的这个问题，核心原因大概率是**markers$ 使用了普通 Subject 而非 BehaviorSubject**，导致路由返回后组件订阅时错过了初始数据的发射事件；另外也存在订阅时机与数据加载时机不匹配的问题。

具体原因拆解 #

从你的代码逻辑来看：

1. 在 ngAfterViewInit 中订阅 markerService.markers$，但如果 InitMarkersService 中的接口请求在订阅完成前就返回了，并且 markers$ 是普通 Subject，那么订阅者是接收不到这次初始数据的——普通 Subject 只会把事件推送给订阅之后的观察者。
2. 而当你修改或删除图形时，会再次调用 markers$.next()，这时候订阅已经存在，所以会触发 showDocumentMarkers 方法，图形也就正常显示出来了。

修复步骤 #

1. 将 markers$ 改为 BehaviorSubject

在你的 markerService 中，把 markers$ 的定义从普通 Subject 改成 BehaviorSubject，它会保存最新的发射值，新订阅的观察者会立即收到当前的最新数据：

// 在 markerService 中引入并定义 BehaviorSubject
import { BehaviorSubject } from 'rxjs';

// 初始化时传入默认空数组
private markersSubject = new BehaviorSubject<any[]>([]);
public markers$ = this.markersSubject.asObservable();

// 更新数据时调用 Subject 的 next 方法
this.markersSubject.next(this.markers);

2. 确保 showDocumentMarkers 能正确处理初始数据

检查你的 showDocumentMarkers 方法，确保它能遍历所有标记并正确绘制到 Canvas 上，记得先清空画布避免重复绘制：

showDocumentMarkers(markers: any[]) {
  // 清空画布，避免旧图形残留
  this.cx.clearRect(0, 0, this.CanvasFreeDrew.nativeElement.width, this.CanvasFreeDrew.nativeElement.height);
  this.ctx.clearRect(0, 0, this.canvasContainer.nativeElement.width, this.canvasContainer.nativeElement.height);

  // 遍历每个标记，根据类型执行绘制逻辑
  markers.forEach(marker => {
    this.cx.strokeStyle = marker.strokeColor;
    this.cx.fillStyle = marker.fillColor;

    if (marker.type === 'circle') {
      this.cx.beginPath();
      this.cx.arc(marker.x, marker.y, marker.radius, 0, Math.PI * 2);
    } else if (marker.type === 'rectangle') {
      this.cx.rect(marker.x, marker.y, marker.width, marker.height);
    }

    this.cx.stroke();
    this.cx.fill();
  });
}

3. 优化订阅的内存管理

在组件销毁时取消订阅，避免内存泄漏：

import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

private destroy$ = new Subject<void>();

ngAfterViewInit() {
  // ... 其他初始化代码
  this.markerService.markers$
    .pipe(takeUntil(this.destroy$))
    .subscribe((markers: any) => {
      console.log(markers);
      this.showDocumentMarkers(markers);
    });
}

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

4. 修正 InitMarkersService 中的细节问题

注意代码中的拼写错误（比如 cnavasComm 应该是 canvasComm），并确保数据更新逻辑正确：

InitMarkersService(strokeColor: FormControl, fillColor: FormControl): any { 
  this.strokeColor = strokeColor; 
  this.fillColor = fillColor; 

  if (!this.currentDocument || this.currentDocument !== this.docService.currentDocumentId) { 
    this.currentDocument = this.docService.currentDocumentId;
    // 取消之前的订阅，避免重复请求
    this.markersSubscription?.unsubscribe();
    this.markersSubscription = this.canvasComm.GetMarkers(this.userID, this.currentDocument)
      .subscribe(res => this.InitMarkersRespond(res));
    this.currentlyEdited = []; 
  }
  // 用 BehaviorSubject 推送最新数据
  this.markersSubject.next(this.markers); 
}

额外检查点 #

• 确认 InitMarkersRespond 方法正确将接口返回的 res 赋值给 this.markers（推荐用数组解构替换原数组：this.markers = [...res]，确保引用更新）。
• 检查 Canvas 尺寸在路由返回后是否正确初始化，避免绘制在不可见区域。

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