Angular 11 后端数据变更时无需刷新页面自动更新视图如何实现？

问题核心误区澄清 #

Angular的变更检测机制仅用于同步前端组件数据与视图渲染，无法感知后端接口的数据变化，你之前的用法方向完全错误。

可行实现方案 #

方案1：短轮询（实现成本最低，适配小时级低频率更新场景） #

原理是按固定间隔发起API请求，对比返回结果与上一次缓存的结果，仅当数据发生变更时才执行后续逻辑，适配你的需求可将轮询间隔设置为30分钟一次，既能保证时效性也不会造成多余资源消耗：

import { Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef, OnDestroy } from '@angular/core';
import { interval, Subscription, startWith } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class AppComponent implements OnInit, OnDestroy  {
  name = 'Angular';
  lastApiData: any = null;
  private pollSub: Subscription | null = null;

  constructor(
    private ref: ChangeDetectorRef,
    private http: HttpClient
  ) {}

  ngOnInit(): void {
    this.pollSub = interval(30 * 60 * 1000)
      .pipe(startWith(0)) // 组件初始化时先执行一次请求
      .subscribe(() => this.asyncCall());
  }

  asyncCall(){
    this.http.get('替换为你的API地址').pipe(
      // 自动对比前后返回值，仅当数据变化时才触发后续回调
      distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
    ).subscribe(newData => {
      this.lastApiData = newData;
      // OnPush策略下需要手动标记触发变更检测
      this.ref.markForCheck();
      // 此处补充数据变更后的业务逻辑
    })
  }

  ngOnDestroy(): void {
    // 组件销毁时清理订阅避免内存泄漏
    this.pollSub?.unsubscribe();
  }
}

方案2：长轮询（资源消耗更低，实时性优于短轮询） #

需要后端配合适配：后端收到请求后不立即返回，而是hold住请求直到数据更新或者超时（建议设置50秒超时阈值），前端收到返回结果后立刻发起下一次请求，比短轮询减少了无效请求次数。

方案3：WebSocket（实时性最高，适合高频率更新场景） #

如果后续数据更新频率提升，可采用WebSocket双向通信方案，后端数据更新时主动推送消息到前端，前端不需要主动发起拉取请求，资源消耗最低。

OnPush策略适配注意点 #

不管使用哪种方案，在拿到新数据更新组件变量后，都需要调用ChangeDetectorRef.markForCheck()才能触发视图重新渲染，你之前在ngOnInit里调用markForCheck()没有作用，因为此时API请求还未返回，数据还未发生变更。

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