Angular 6+ 使用Resolver加载视频URL出现时序异常问题排查

问题根因 #

你目前的用法完全没有发挥Angular Resolver的作用，错误点如下：

• 路由resolve配置格式错误，没有指定解析结果的存储键名，无法将预加载的数据传递给组件
• 组件内部没有读取Resolver预加载的结果，反而重复发起了独立的异步请求，两次请求没有依赖关系，重复请求的返回时机不可控，因此会偶现视频加载早于接口返回的问题
• Resolver代码存在依赖注入的变量名、服务类名大小写不匹配的问题，可能额外引发注入报错

修正方案 #

1. 修正路由配置 #

为Resolver的解析结果指定存储键，方便组件读取：

{
    path: 'videos',
    resolve: { videoUrl: ValuePairServiceResolver },
    component: VideosComponent
}

2. 修正Resolver代码 #

统一处理兜底逻辑，修正注入错误：

@Injectable({ providedIn: 'root' })
export class ValuePairServiceResolver implements Resolve<string> {
    // 修正服务类名大驼峰、注入变量名和调用时一致
    constructor(private valuePairService: ValuePairService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<string> {
        return this.valuePairService.getName('myVideoUrl').then(responseUrl => {
          // 兜底逻辑提前在Resolver中处理完成
          return responseUrl.value ?? '//player.vimeo.com/video/09452678?dnt=1';
        });
    }
}

3. 修正组件代码 #

直接读取预加载完成的结果，不需要重复发请求：

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

export class VideosComponent {
  videoUrl: string;
  // 注入ActivatedRoute读取预加载数据
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    // Resolver会确保数据加载完成后才会初始化组件，这里拿到的一定是最终结果
    this.videoUrl = this.route.snapshot.data['videoUrl'];
  }
}

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