首页 > 解决方案 > 使用 ActivatedRouteSnapshot 和 Observables 解决数据问题

问题描述

我在 Angular 2 中遇到了 observables 的问题。我可以使用服务从数据库中检索数据,并且可以 console.log 在我的服务和解析器文件中记录数据,但我无法将数据传递到我的组件中。

我正在使用服务来查询数据库:

getExamQuestion(query) {
  return this.http.get('api/question/1/1').pipe(tap(data => {
    console.log("questiondata", data)  // This logs the expected data
  }));
}

constructor(
      private examdataservice:ExamdataService){
    }
    resolve(route: ActivatedRouteSnapshot) {

      return this.examdataservice.getExamQuestion(route.params).pipe(tap(data => {
    console.log("questiondata", data)  // This logs also the expected data
  }));
     
    }

我的组件有以下代码,但我无法从服务/解析器中检索数据:

ngOnInit(): void {
    this.qData = this.route.snapshot.data['ExamResolver']
    console.log("data", this.qData) // This logs 'undefined'
  }

如何让我的组件访问解析的数据?任何建议将不胜感激。

标签: javascriptangularrxjsangular-activatedroute

解决方案


您必须配置您的路线以使您的已解析数据在您的组件中可访问。例如,您应该有一个到您的组件的路由,如下所示:

{
  path: 'path/to/your/component',
  component: YourComponent,
  resolve: {
    examQuestions: YourResolver
  }
}

然后您可以访问组件中的数据:

  ngOnInit(): void {
    this.qData = this.route.snapshot.data['examQuestions'];
    console.log("data", this.qData); // This logs 'undefined'
  }

推荐阅读