Angular定时调用Web API获取消息时如何消除UI闪烁/加载现象

看起来你遇到的问题主要是因为每次调用API后直接替换了notificationmsgs数组，导致Angular销毁所有旧的列表元素再重新渲染，加上网络请求的延迟，就出现了明显的UI闪烁。另外你的代码里还有个小细节问题：async函数里混用subscribe其实没必要，await是针对Promise的，Observable得用RxJS的操作符来处理，这也可能导致异步逻辑的混乱。

下面给你几个可行的优化方案，一步步解决问题：

1. 优化数据更新逻辑：只新增消息，不替换整个数组 #

直接替换数组是UI闪烁的核心原因，我们可以对比新旧消息，只把新增的内容添加到现有数组中，避免DOM全量重绘：

修改notification.ts里的getNotificationMessage方法：

getNotificationMessage() {
  this.notificationservice.getNotificationMessages().subscribe(
    (messages: NotificationResult) => {
      // 建议用消息的唯一ID来对比，比直接对比内容更准确
      const newMessages = messages.data.filter(
        newMsg => !this.notificationmsgs.some(oldMsg => oldMsg.id === newMsg.id)
      );
      // 把新消息追加到数组（如果要放在最前面就用unshift）
      this.notificationmsgs.push(...newMessages);
      // 仅当数量真的变化时再更新count，避免不必要的UI变更
      if (this.notificationcount !== messages.recordscount) {
        this.notificationcount = messages.recordscount;
      }
    },
    error => this.errorMessage = <any>error
  );
}

2. 用RxJS优化轮询逻辑，避免重复请求&内存泄漏 #

用RxJS的interval结合switchMap代替原生setInterval，可以自动取消前一次未完成的请求（如果API响应慢，新请求会替换旧的），还能在组件销毁时统一清理订阅，防止内存泄漏：

更新notification.ts的代码：

import { interval, Subscription } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 定义订阅变量，用于组件销毁时清理
private pollSubscription!: Subscription;

ngOnInit(){
  // 用RxJS的interval实现轮询，switchMap自动取消旧请求
  this.pollSubscription = interval(5000)
    .pipe(switchMap(() => this.notificationservice.getNotificationMessages()))
    .subscribe(
      (messages: NotificationResult) => {
        // 复用刚才的增量更新逻辑
        const newMessages = messages.data.filter(
          newMsg => !this.notificationmsgs.some(oldMsg => oldMsg.id === newMsg.id)
        );
        this.notificationmsgs.push(...newMessages);
        this.notificationcount = messages.recordscount;
      },
      error => this.errorMessage = <any>error
    );
}

ngOnDestroy(){
  // 组件销毁时取消订阅，避免内存泄漏
  if(this.pollSubscription){
    this.pollSubscription.unsubscribe();
  }
}

3. 用AsyncPipe简化异步绑定（可选） #

如果把消息列表放到BehaviorSubject里，配合Angular的AsyncPipe，可以让UI更新更高效，还能省去手动管理订阅的麻烦：

在组件里添加Subject定义：

import { BehaviorSubject } from 'rxjs';

private notificationMsgsSubject = new BehaviorSubject<any[]>([]);
// 对外暴露可观察对象
notificationMsgs$ = this.notificationMsgsSubject.asObservable();

// 订阅API响应时更新Subject
.subscribe((messages: NotificationResult) => {
  const currentMsgs = this.notificationMsgsSubject.value;
  const newMessages = messages.data.filter(
    newMsg => !currentMsgs.some(oldMsg => oldMsg.id === newMsg.id)
  );
  // 推送新的数组（用展开运算符保持不可变性）
  this.notificationMsgsSubject.next([...currentMsgs, ...newMessages]);
  this.notificationcount = messages.recordscount;
})

然后在模板里用AsyncPipe绑定：

<h6 *ngFor="let msg of notificationMsgs$ | async"><span class="badge badge-success">{{msg}}</span></h6>

AsyncPipe会自动处理订阅和取消订阅，也能让UI更新更流畅。

4. 终极方案：用WebSockets代替轮询（推荐） #

如果你的后端支持WebSockets（比如ASP.NET SignalR、Socket.io），完全可以抛弃定时轮询，改成服务器主动推送新消息到前端。这样既不会有定时请求的延迟，也不会有UI闪烁问题，只有当有新消息时才会触发UI更新，性能和体验都会好很多。

比如用Angular SignalR，只需要建立一次连接，监听服务器的消息推送事件，收到新消息时直接添加到列表即可，从根源解决轮询带来的问题。

备注：内容来源于stack exchange，提问作者Alin