路由器解析器未呈现组件

问题描述

我有这个路由器解析器，用于从Google Firestore检索数据.我正在尝试使用解析器来预先获取数据.当我将调试器放置在resolve函数时，它会向我显示从服务器检索的数据.但是它永远不会从resolve()方法返回.谁能帮帮我.

I have this router resolver to retrieve data from the Google Firestore. I am trying to use the Resolver to fetch the data ahead. When I place debugger at resolve function it shows me the data retrieved from the Server. But it is never returning from the resolve() method. Can anyone please help me out.

路由模块

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

应用程序模块

  providers: [
    ProjectService,
    ProjectResolver
  ],

解析器服务

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加载)**

** Project Component (This component in never loaded by 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'];
      })
  }

}

推荐答案

问题是Angular Firebase Observable(事件流)将永远不会像正常的"observable"那样完成，因此永远都无法解决.我使用"take"运算符修改了Observable，以获取第一项并被迫完成.

The problem is that the Angular Firebase Observable(event stream) will never complete like normal "observable" so it is never resolving. I modified the Observable with the "take" operator to get the first item and forced to complete.

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

更改:

• 已删除ProjectService
• 修改后的ProjectResolver
• 修改后的ProjectComponent

我在下面发布了针对我的问题的解决方案:

I posted the solution to my problem below:

项目解析器(正在运行)

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'];
    })
  }
}

这篇关于路由器解析器未呈现组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！