Angular 6+ 解析器不加载视频 url

Question

我正在尝试在从服务器加载数据后加载视频 url。我正在使用解析器，但它不起作用，因为视频有时会在数据之前加载。我做错了什么？

component.ts

this.valuePairService.getName('myVideoUrl').then(
  (responseUrl: any) => {
    this.videoUrl =
      responseUrl.value === undefined && this.hasVideo
      ? '//player.vimeo.com/video/09452678?dnt=1' 
        : responseUrl.value;
  }
);

解析器

@Injectable({ providedIn: 'root' })
export class ValuePairServiceResolver implements Resolve<string> {
    constructor(private nameValuePairService: valuePairService) { }

    resolve(route: ActivatedRouteSnapshot,
      state: RouterStateSnapshot
    ): Observable<any> | Promise<any> | any {
        return this.valuePairService.getName('myVideoUrl');
    }
}

路由模块

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

Answer 1

您在路由模块中的语法不正确。您需要指定包含解析值的属性名称：

resolve: { videoUrl: ValuePairServiceResolver }

此外，您没有在组件中正确使用它。您应该将 ActivatedRoute 注入构造函数，然后您将能够访问已解析的数据：

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.data.subscribe(({ videoUrl }) => {
    // you can access videoUrl here
  });
}

Angular 6+ 解析器不加载视频 url

Angular 6+ resolver doesn't load video url

angular

angular-resolver