Angular Router Resolver切换组件前未等待数据加载问题

你的核心问题是Resolver未等待外部API请求完成就触发了路由切换，导致页面先显示空白，待API返回数据后才更新内容。以下是具体问题点和修复方案：

1. Service 方法逻辑错误 #

当前getPosts()直接用of(this.beerQR)创建Observable，这会立即发出当前的beerQR值（此时大概率还没被外部API填充），完全没有等待API请求的过程。

修复后的Service代码 #

假设外部API是HTTP请求，应直接返回API请求的Observable，确保Resolver能等待请求完成：

// 注入HttpClient用于发起API请求
constructor(private http: HttpClient) {}

getPosts() {
  // 替换为实际的API地址
  return this.http.get('你的API接口地址').pipe(
    tap({
      next: (response) => {
        this.beerQR = response; // 将API返回值赋值给beerQR
        console.log(response);
      },
      error: (err) => console.log('请求错误', err),
      complete: () => console.log('请求完成')
    })
  );
}

2. Resolver 构造函数注入错误 #

Resolver里错误地注入了自身private beerResolver: BeerResolver，会导致循环依赖，应改为注入对应的业务Service：

修复后的Resolver代码 #

@Injectable()
export class BeerResolver implements Resolve<any> {
  // 注入正确的业务Service，而非Resolver自身
  constructor(private beerService: BeerService, private router: Router) {}

  resolve() {
    // 返回API请求的Observable，Resolver会自动等待其完成
    return this.beerService.getPosts().pipe(
      delay(500), // 非测试需求可移除该延迟
      // 可选：请求失败时重定向到错误页面
      catchError(() => {
        this.router.navigate(['/error']);
        return EMPTY;
      })
    );
  }
}

3. Component 代码简化 #

组件中async关键字多余（未使用await），可简化写法：

ngOnInit() {
  // 假设路由配置中resolve的key为beerData
  this.route.data.subscribe(({ beerData }) => {
    console.log('Resolver返回数据', beerData);
    this.newArr = beerData;
  });
}

关键原理 #

Angular Resolver的核心逻辑是等待返回的Observable完成后，才会执行路由切换。只要Service返回的是API请求的Observable，Resolver就会等到API响应完毕再跳转页面，从根源避免空白问题。

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