Angular 5 HTTPClient 没有为 RouteResolver 返回结果

Question

我不得不说 HttpClient Observables、订阅等相当 hard/time 需要花费很多时间才能正确完成。

我一直在研究一个问题，现在已经筋疲力尽了。我有一项服务需要能够执行映射功能。

  loadAllSummary(organisationId: number) {
    return this.http.get('/api/aircrafts/organisations/' + organisationId)
      .pipe(
        map(data => data.forEach(datum => {
          console.log('why am i not getting here! ' + JSON.stringify(data));
          return this.mapToSummary(datum);
        }))
      );
  }

使用 mapToSummary() 方法：

  private mapToSummary(aircraft: Aircraft): IAircraftSummary {
    const lastDate: Date = new Date(Math.max.apply(null, aircraft.workorders.map(function(e) {
      return new Date(e.date);
    })));

    return new AircraftSummary({
      lastWork: lastDate,
      rego: aircraft.registration,
      make: aircraft.make,
      model: aircraft.model,
      contact: (aircraft.owner.type.endsWith('primary')) ? aircraft.owner.principal : aircraft.operator.principal,
      phone: (aircraft.owner.type.endsWith('primary')) ? aircraft.owner.contact.phone : aircraft.operator.contact.phone
    });
  }

现在，我需要这些摘要作为视图的输入数据，所以我从互联网上借用了代码并创建了这个 ResolverService：

@Injectable()
export class AircraftsResolverService implements Resolve<IAircraftSummary[]> {

  constructor(private service: AircraftService,
              private router: Router) { }

  resolve(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<IAircraftSummary[]> {
    console.log('called AircraftsResolverService')
    const id = route.params['id'];
    if (isNaN(+id)) {
      console.log(`Organisation id was not a number: ${id}`);
      this.router.navigate(['/login']);
      return Observable.of(null);
    }
    return this.service.loadAllSummary(+id)
      .map(summaries => {
        console.log(summaries)
        if (summaries) {
          return summaries;
        }
        console.log(`Summaries were not found: ${id}`);
        this.router.navigate(['/organisations/', +id]);
        return null;
      })
      .catch(error => {
        console.log(`Retrieval error: ${error}`);
        this.router.navigate(['/organisations/', +id]);
        return Observable.of(null);
      });
  }
}

然后我在 ngOnInit 调用中引用...

ngOnInit() {

this.currentUser = this.authenticationService.returnCurrentUser();

this.route.data
  .subscribe(({aircrafts}) => {
    this.aircrafts = aircrafts;

    const id = +this.route.snapshot.paramMap.get('id');
    console.log(' where are my aircraft!' + JSON.stringify(aircrafts));
    this.ELEMENT_DATA = aircrafts;
    this.displayedColumns = ['Last Work', 'Rego', 'Make', 'Model', 'Contact', 'Phone'];
    this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
    this.dataSource.sort = this.sort;
    console.log(id);
    if (id) {
      this.organisationService.getById(id).subscribe(org => {
        this.organisation = org;
      });
    } else {
      console.log('its bad');
    }

  });

console.log(this.dataSource);

}

订阅下的控制台日志未定义，服务下的 console.logs 永远不会被触发。所以再一次，我发现自己不明白为什么订阅会火或不火，或者他们做什么。

我该如何克服这个问题？谢谢大家

编辑：看来问题实际上出在 ResolverService 中，我已经能够确定数据服务正在获取结果并且它们是正确的。由于某种原因，解析器服务看不到它们。

Answer 1

答案在路由解析器中，或者说 app-routing-module。我应该把它包括在问题中，因为一些 angular saltys 会把它捡起来

我正在尝试这样做：.

  { path: 'organisations/:orgId/aircrafts/:id', component: AircraftsComponent, resolve: {aircrafts : AircraftsResolverService}, canActivate: [AuthGuard] },

但是你不能，你必须这样做：

  { path: 'organisations/aircrafts/:orgId/:id', component: AircraftsComponent, resolve: {aircrafts : AircraftsResolverService}, canActivate: [AuthGuard] },

生成非常 non-resty 的网址，但是，嘿，不管怎样，对吧？

Angular 5 HTTPClient 没有为 RouteResolver 返回结果

Angular 5 HTTPClient not returning results for RouteResolver

angular-httpclient

angular5