窗口Resize时Angular组件重复初始化API重复调用问题求助

窗口调整触发断点时ScheduleComponent的ngOnInit多次执行，本质是组件被销毁后重新初始化了——这会导致API重复请求、加载界面反复出现。以下是几种可行的解决思路：

1. 避免组件销毁重建 #

先检查组件所在的模板代码，是否存在基于断点状态的条件渲染（比如用*ngIf根据平板/移动端状态显示或隐藏组件）。如果有，把*ngIf改成CSS控制显示隐藏（比如[class.hidden]="handsetView"，配合.hidden { display: none; }）。这样组件不会被Angular销毁重建，ngOnInit自然只会执行一次。

2. 给API请求加缓存/加载标志 #

如果组件确实无法避免重建，就在组件内部加一个加载状态标志，或者在服务层缓存请求结果：

组件内加标志位（快速解决） #

在组件中添加一个dataLoaded变量，标记数据是否已经加载完成，ngOnInit里只在未加载时调用API：

@Component
export class ScheduleComponent implements OnInit {
  allChildComponentsEmpty = false;
  scheduleItem!: any;
  isLoader: boolean=false;
  public breakpoints = Breakpoints;
  public layoutSize: string | undefined = '';
  handsetView = false;
  tabletView = false;
  widescreenView = false;
  primaryBtn = ButtonColor.primary;
  icon = 'di di-leftArrow';
  isSaved = false;
  isPersonalMeeting: boolean = false;
  isHybridMeeting: boolean = false;
  isWorkMeeting: boolean = false;
  private dataLoaded = false; // 新增加载状态标志

  constructor(
    public breakpointObserver: BreakpointObserver,
    private breakpointService: BreakpointService,
    private scheduleService: ScheduleService,
  ) {
    this.breakpointService.startBreakpointSubscribe();
  }

  ngOnInit(): void {
    // 仅当未加载过数据时发起API请求
    if (!this.dataLoaded) {
      this.getAllSchedules();
      this.dataLoaded = true;
    }
    this.subscribeBreakpoint();
    this.breakpointObserver.observe([Breakpoints.Handset,
      Breakpoints.HandsetLandscape,
      Breakpoints.HandsetPortrait,
      Breakpoints.Tablet,
      Breakpoints.TabletLandscape,
      Breakpoints.TabletPortrait,
      '(min-width: 1600px)'])
      .subscribe(result => {
        this.handsetView = false;
        this.widescreenView = false;
        const breakpoints = result.breakpoints;

        if (breakpoints[Breakpoints.Tablet] || breakpoints[Breakpoints.TabletLandscape]
          || breakpoints[Breakpoints.TabletPortrait]) {
          this.tabletView = true;
        } else if (breakpoints[Breakpoints.Handset] || breakpoints[Breakpoints.HandsetLandscape]
          || breakpoints[Breakpoints.HandsetPortrait]) {
          this.handsetView = true;
        } else if (this.breakpointObserver.isMatched('(min-width: 1600px)')) {
          this.widescreenView = true;
        }
      });
  }

  // 其余方法保持不变...
}

服务层缓存（更优雅的方案） #

修改ScheduleService，用RxJS的shareReplay缓存请求结果，确保多次调用只会发起一次API请求：

@Injectable({ providedIn: 'root' })
export class ScheduleService {
  private schedulesCache$: Observable<Schedules[]> | null = null;

  getSchedules(): Observable<Schedules[]> {
    if (!this.schedulesCache$) {
      this.schedulesCache$ = this.http.get<Schedules[]>('/api/schedules')
        .pipe(shareReplay(1)); // 缓存最新的一次请求结果
    }
    return this.schedulesCache$;
  }
}

3. 检查自定义BreakpointService的实现 #

你在构造函数中调用了this.breakpointService.startBreakpointSubscribe()，如果这个服务内部的逻辑导致组件所在的父容器重新渲染、或者触发了组件的销毁重建，需要排查服务代码，去掉不必要的变更触发逻辑。

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