从解析器订阅Angular 7 rxjs有什么问题

Question

我写了一个简短的代码来尝试在组件中路由解析器和订阅。这里是路由配置：

  {
    path: '',
    component: EventsComponent,
    resolve: {
      events: EventsResolverService
    }
  },
  ...

Resolver简单地实现Resolve接口：

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { EventInterface } from './event-interface';
import { EventsService } from './events.service';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class EventsResolverService implements Resolve<Map<number, EventInterface>> {

  constructor(private eventsService: EventsService) { }

  public resolve(): Observable<Map<number, EventInterface>> {
    console.log('Resolver in progress');
    return this.eventsService.asObservable();
  }
}

然而，我用来获取可观察事件地图的服务：

  public asObservable(): Observable<Map<number, EventInterface>> {
    if (this.events.size) {
      return of(this.events);
    } else {
      this._hydrate();
      console.log('Events are : ' + this.events.size);
      return of(this.events);
    }
  }

最后，在组件的ngOnInit（）方法中：

  public ngOnInit(): void {
    this.activatedRoute.data.subscribe(
      (events: Map<number, EventInterface>) => {
        console.log('Hi events resolved ' + events.size);
        this.eventsMap = events;
      },
      (error: any) => {
          console.log('Something went wrong : ' + error);
      }
    );
  }

控制台消息总是返回：未定义，但在服务中，事件映射大小正确返回：

这段代码有什么问题？

Answer 1

您正在以错误的方式处理由ActivatedRoute.data发出的值。

this.activatedRoute.data.pipe(map(data=>data.events)).subscribe(
      (events: Map<number, EventInterface>) => {
        console.log('Hi events resolved ' + events.size);
        this.eventsMap = events;
      },
      (error: any) => {
          console.log('Something went wrong : ' + error);
      }
    );