Angular 6+ 解析器不加载视频网址答案

【问题标题】：Angular 6+ resolver doesn't load video urlAngular 6+ 解析器不加载视频网址
【发布时间】：2021-08-18 00:50:32
【问题描述】：

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

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
  },

【问题讨论】：

这不是你应该在组件中使用它的方式。查看文档：angular.io/api/router/Resolve
谢谢@MaciejKasprzak 我已经查看了 Angular 文档，但该示例不适用于我的情况。

标签： angular angular-resolver

【解决方案1】：

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

resolve: { videoUrl: ValuePairServiceResolver }

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

constructor(private route: ActivatedRoute) { }

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

【讨论】：

非常感谢您的帮助！！！效果很好。