Angular懒加载组件中共享服务未初始化，超时方案是否最优？

依赖固定100ms超时的做法隐患极大——不同设备的加载速度、网络状态甚至浏览器进程负载都会影响懒加载组件的初始化时间，100ms在某些场景下可能不够，导致数据传递失败；反之在快设备上又会造成不必要的延迟，完全不可靠。

下面给你几个更可靠的替代方案：

方案1：通过路由参数传递数据（适合小体积、可序列化的数据） #

把行数据序列化后作为路由参数传递，目标组件从ActivatedRoute中读取，完全不依赖共享Service的初始化时序：

发送方代码： #

onRowClicked(row: any) {
  // 序列化数据（用btoa避免特殊字符问题）
  const serializedRow = btoa(JSON.stringify(row));
  this.router.navigate(['review', { data: serializedRow }]);
}

接收方（懒加载组件）代码： #

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const serializedData = params.get('data');
    if (serializedData) {
      const rowData = JSON.parse(atob(serializedData));
      // 这里处理行数据
    }
  });
}

优点：路由原生机制，可靠稳定，无需依赖外部Service；缺点：不适合包含函数、循环引用等不可序列化内容的大数据。

方案2：调整共享Service的作用域，全局初始化 #

把你的共享Service改为根注入器提供，这样Service会在应用启动时就完成初始化，不用等懒加载组件加载，彻底解决时序问题：

共享Service修改： #

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root' // 关键：使用根注入器，全局唯一实例
})
export class SharedService {
  private dataSubject = new BehaviorSubject<any>(null);
  data$: Observable<any> = this.dataSubject.asObservable();

  change(data: any) {
    this.dataSubject.next(data);
  }
}

发送方代码： #

onRowClicked(row: any) {
  // 先传递数据，再导航
  this.sharedService.change(row);
  this.router.navigate(['review']);
}

接收方（懒加载组件）代码： #

ngOnInit() {
  this.sharedService.data$.subscribe(data => {
    if (data) {
      // 处理行数据，可根据需求添加过滤逻辑避免旧数据干扰
    }
  });
}

注意：如果之前你把这个Service放在懒加载模块的providers数组里，会导致模块加载时创建新的Service实例，和发送方的实例不是同一个，一定要移除模块级的providers配置，只保留providedIn: 'root'。

这个方案是处理复杂数据传递的最优解，完全规避了时序问题，代码也更简洁。

方案3：监听路由导航完成事件（兜底方案） #

如果因为某些限制不能修改Service作用域，也可以监听路由的导航完成事件，代替固定超时：

import { Router, NavigationEnd } from '@angular/router';
import { filter, first } from 'rxjs/operators';

onRowClicked(row: any) {
  const navigationEnd$ = this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    first()
  );

  this.router.navigate(['review']);
  navigationEnd$.subscribe(() => {
    // 用0ms超时确保组件已完成初始化（微任务队列执行）
    setTimeout(() => {
      this.sharedService.change(row);
    }, 0);
  });
}

这种方案比固定超时可靠，但还是不如前两种方案优雅，只建议作为临时兜底。

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