Маршрутизатор Resolver не стреляет под наблюдением без подписки - PullRequest
Новая
       14

Маршрутизатор Resolver не стреляет под наблюдением без подписки

0 голосов
/ 03 мая 2018

У меня есть маршрут, которому нужны некоторые данные из моей базы данных Firebase перед загрузкой маршрута. Такое ощущение, что Route не вызывает подписку, поэтому запрос никогда не запускается. Я пропускаю шаг?

(угловой 5)

Мой роутер: 

{
  path: 'class/:idName',
  component: ClassComponent,
  resolve: {
    classData: ClassResolver
  }
},

Мой резольвер: 

@Injectable()
export class ClassResolver implements Resolve<any> {

    constructor(
        private db: AngularFireDatabase
    ) {}

    resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
        // return 'some data'; //This worked fine
        return this.db
           .list('/')
           .valueChanges() // Returns Observable, I confirmed this. 
           //.subscribe(); // This returns a Subscriber object if I call it and I never get any data
    }

    // I tried this and it didnt work either
    //const list = this.db
    //        .list('/')
    //        .valueChanges();
    //console.log('list', list);  // Is a Observable
    //list.subscribe(data => {
    //    console.log('data', data); // returned data
    //    return data;
    //});
    //return list; // never gets to the component
}

Мой компонент: 

public idName: string;
// Other vars

constructor(
    private fb: FormBuilder,
    private route: ActivatedRoute,
    private db: AngularFireDatabase
) {
    // Form stuff    
}

ngOnInit() {
    // Never makes it here
    this.idName = this.route.snapshot.params.idName;
    const myclass = this.route.snapshot.data.classData;
    console.log('myclass', myclass);
}

Я никогда не доберусь до компонента. Он ожидает загрузки компонента, чего он никогда не делает. Если я добавлю подписку и console.out к данным, они вернутся довольно быстро с правильными данными, поэтому это не служба.

======

Edit:

После вызова .subscribe() в моем резольвере, который теперь возвращает Subscriber объект. Потому что моя подпись возврата позволяет any возвращать эту Subscriber, как если бы это были данные. Это кажется очевидным.

Теперь у меня возникает вопрос, почему не разрешается моя наблюдаемая?

Обновленный заголовок и текст выше

======

Решено:

Я обнаружил эту проблему (https://github.com/angular/angularfire2/issues/624), по-видимому, это проблема в библиотеке Firebase, которую я использую. Их Observables не запускаются маршрутами. Она была поднята в 2016 году и до сих пор проблема. Я не думаю, что это будет исправлено.

Обходной путь, который я нашел, был таким 

resolve(route: ActivatedRouteSnapshot): Observable<any> | Promise<any> | any {
    return this.db
            .list('/', ref => ref.orderByChild('idName').equalTo(route.params.idName))
            .valueChanges()
            .first();
}

1 Ответ

0 голосов
/ 03 мая 2018

Ваш код выглядит правильно. Вы передавали параметр в маршрут вашего класса? Он не разрешается без параметра, поэтому вы не можете получить доступ к функции ngOnInit. Я бы посоветовал консоли записывать ваши снимки маршрута, чтобы убедиться, что вы захватываете нужные объекты. Я также опубликую пример разрешения, который я получил:

Component.ts 

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  public data: Observable<any>;

  constructor(private router: ActivatedRoute) { }

  ngOnInit() {
    this.data = this.router.snapshot.data.test;
  }
}

Routing.ts 

{ path: 'home/:id', component: HomeComponent, resolve: { test: ResolverService } },

ResolverService 

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';

@Injectable()
export class ResolverService implements Resolve<Observable<any>> {

  constructor() { }

  public resolve(route: ActivateRouteSnapShot): Observable<any> {
    return Observable.of({test: 'Test Observable'});
  }
}

HTML 

{{this.data.test}}
...