Router Resolver не рендеринг компонента

Question

У меня есть этот маршрутизатор для извлечения данных из Google Firestore. Я пытаюсь использовать Resolver для получения данных вперед. Когда я помещаю отладчик в функцию разрешения, он показывает мне данные, полученные с сервера. Но он никогда не возвращается из метода resol (). Может кто-нибудь, пожалуйста, помогите мне.

Модуль маршрутизации

const routes: Routes = [
    { path: '', component: HomeComponent},
    { path: 'projects', component: ProjectsComponent, resolve: {projectData: ProjectResolver} },
    { path: 'about', component: AboutComponent}
];

Модуль приложения

  providers: [
    ProjectService,
    ProjectResolver
  ],

Resolver Service

import { Observable } from 'rxjs';
import { ActivatedRouteSnapshot, RouterStateSnapshot, Resolve } from '@angular/router';
import { Injectable } from '@angular/core';
import { ProjectService } from './project.service';
import { map } from "rxjs/operators";
import { Project } from './project.model';

@Injectable()
export class ProjectResolver implements Resolve<Project[]> {

    constructor(private projectService: ProjectService ) {

    }

    resolve(route: ActivatedRouteSnapshot, router: RouterStateSnapshot) : Observable<Project[]> | any{
        return this.projectService.getProjects().pipe(map(project => {
            return project //Debugger shows fetched data(Array of projects)
        }
        ));
    }
}

Служба проекта

import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from "rxjs";
import { Injectable } from "@angular/core";

@Injectable()
export class ProjectService {

    constructor(private db: AngularFirestore) {}

    getProjects(): Observable<any> {
        return this.db.collection('currentProjects').valueChanges();
    }

}

** Компонент проекта ( Этот компонент никогда не загружался Resolver ) **

import { Component, OnInit, Injectable } from '@angular/core';
import { Project } from './project.model';
import { ActivatedRoute } from '@angular/router';
import { ProjectService } from './project.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-projects',
  templateUrl: './projects.component.html',
  styleUrls: ['./projects.component.css']
})

export class ProjectsComponent implements OnInit {

   projects: Project[] = [];

  constructor(private route: ActivatedRoute, private projectService: ProjectService) { 
  }

  ngOnInit() {
      this.route.data.subscribe((data: Project[]) => {
        this.projects = data['projectData'];
      })
  }

}

Answer 1

Проблема в том, что Angular Firebase Observable (поток событий) никогда не завершится как обычная «наблюдаемая», поэтому она никогда не разрешается. Я изменил Observable с помощью оператора «take», чтобы получить первый элемент, и заставил его завершить.

this.db.collection('currentProjects').valueChanges().take(1);

Изменения:

• Удалено ProjectService
• Модифицированный ProjectResolver
• Модифицированный компонент проекта

Я отправил решение моей проблемы ниже:

Project Resolver (рабочий)

export class ProjectResolver implements Resolve<any> {

    constructor(private db: AngularFirestore) {

    }

    resolve(route: ActivatedRouteSnapshot, router: RouterStateSnapshot) : any{

        return Observable.from(this.db.collection('currentProjects').valueChanges()
            .do(data => {  
                return data
            }).take(1))
    }
}

Компонент проекта (рабочий)

export class ProjectsComponent implements OnInit {

  private projects: Project[];

  constructor(private route: ActivatedRoute) {

  }

  ngOnInit() {
    this.route.data.subscribe((data) => {
      this.projects = data['projectData'];
    })
  }
}

Answer 2

Получать данные типа this.route.snapshot.data вместо this.route.data и нет необходимости подписываться на них

ngOnInit() {          
   this.projects = this.route.snapshot.data['projectData'];
}