如何在Angular前端无需刷新页面动态获取Spring Boot API数据？

一、定时轮询（简单易实现） #

适合实时性要求不高的场景，通过定时调用API获取最新数据，利用RxJS工具简化逻辑并避免内存泄漏。

方案1：手动管理订阅 #

修改组件代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MesswerteService } from './messwerte.service';
import { interval, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';

export class AktuelleWerteComponent implements OnInit, OnDestroy {
  messwerte : any; 
  maxId : any;
  private destroy$ = new Subject<void>();

  constructor(private service : MesswerteService) { }

  ngOnInit(): void {
    // 页面初始化先拉取一次数据
    this.service.getMaxId().subscribe(data => {
      this.maxId = data;
    });

    // 每隔5秒自动刷新数据（可根据需求调整间隔）
    interval(5000)
      .pipe(
        switchMap(() => this.service.getMaxId()),
        takeUntil(this.destroy$)
      )
      .subscribe(data => {
        this.maxId = data;
      });
  }

  ngOnDestroy(): void {
    // 组件销毁时清理订阅，防止内存泄漏
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案2：使用async管道自动管理订阅 #

无需手动处理订阅销毁，代码更简洁：

import { Component, OnInit } from '@angular/core';
import { MesswerteService } from './messwerte.service';
import { interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

export class AktuelleWerteComponent implements OnInit {
  // 定义可观察对象，每隔5秒拉取一次数据
  maxId$ = interval(5000).pipe(switchMap(() => this.service.getMaxId()));

  constructor(private service : MesswerteService) { }

  ngOnInit(): void { }
}

对应的HTML修改为：

<p style="font-size: 50px;">{{(maxId$ | async)?.temperatur}}°C</p>

二、WebSocket实时推送（高效实时） #

如果需要低延迟的实时数据更新，推荐使用WebSocket实现后端主动推送。Spring Boot后端在数据库数据变更时，主动向前端推送最新数据；Angular前端监听WebSocket消息并更新页面。

Angular端实现示例 #

1. 服务层代码修改

import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';

@Injectable({ providedIn: 'root' })
export class MesswerteService {
  private socket$: WebSocketSubject<any>;

  constructor() {
    // 替换为你的后端WebSocket地址
    this.socket$ = webSocket('ws://localhost:8080/ws/messwerte');
  }

  // 获取实时数据推送流
  getRealTimeMaxId() {
    return this.socket$.asObservable();
  }

  // 保留原有API方法
  getMaxId() {
    return this.client.get(url);
  }
}

2. 组件代码修改

import { Component, OnInit, OnDestroy } from '@angular/core';
import { MesswerteService } from './messwerte.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

export class AktuelleWerteComponent implements OnInit, OnDestroy {
  maxId : any;
  private destroy$ = new Subject<void>();

  constructor(private service : MesswerteService) { }

  ngOnInit(): void {
    // 初始化先拉取一次数据，避免WebSocket连接前页面无内容
    this.service.getMaxId().subscribe(data => {
      this.maxId = data;
    });

    // 监听WebSocket推送的实时数据
    this.service.getRealTimeMaxId()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        this.maxId = data;
      });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
    this.socket$.complete(); // 关闭WebSocket连接
  }
}

三、手动触发刷新 #

如果只需要在特定用户操作（比如提交表单、点击按钮）后更新数据，可封装数据获取方法，在操作完成后手动调用：

import { Component, OnInit } from '@angular/core';
import { MesswerteService } from './messwerte.service';

export class AktuelleWerteComponent implements OnInit {
  maxId : any;

  constructor(private service : MesswerteService) { }

  ngOnInit(): void {
    this.loadMaxId();
  }

  // 封装数据加载方法
  loadMaxId() {
    this.service.getMaxId().subscribe(data => {
      this.maxId = data;
    });
  }

  // 示例：用户提交操作后触发刷新
  onSubmit() {
    // 执行提交逻辑...
    this.loadMaxId(); // 提交完成后刷新数据
  }
}

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