Как я могу предоставить AngularFirestoreDocument для компонента, используя параметры маршрута через службу? - PullRequest
Новая
       16

Как я могу предоставить AngularFirestoreDocument для компонента, используя параметры маршрута через службу?

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

Я только что узнал о FireBase и, похоже, уловил мое понимание того, как он работает с Observables. Если у меня есть компонент ItemDetailComponent, который использует службу ItemService для доступа к документу пожарного депо, почему этот код возвращает ноль только тогда, когда документ существует?

Вот onInit компонента: 

  ngOnInit() {
    this.item$ = this.route.paramMap
    .switchMap((params: ParamMap) => {
      return this.service.getItem(params.get('id'));
    });
    // this works when accessed from the template
    this.forcedItem$ = this.afs.doc('items/oll71FoVdq0wpLAM85HO').valueChanges();
  }

Вот метод обслуживания: 

  getItem(ItemId: string | number) {
    this.ItemDoc = this.afs.doc<any>(`items/${itemId}`);
    return this.ItemDoc.valueChanges();
  }

Вот шаблон компонента: 

  <span>Doesn't work: {{item$ | async | json}}</span>
  <hr/>
  <span>works: {{forcedItem$ | async | json}}</span>

Единственное отличие от Angular docs в том, что я возвращаю Observable вместо POJO. 

  ngOnInit() {
    this.heroes$ = this.route.paramMap
      .switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes(); // This returns a POJO, I'm returning an Observable
      });
  }

В любом случае switchMap не возвращает ничего, кроме null в моем случае. Может кто-нибудь объяснить разницу?

1 Ответ

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

Поймайте ваш параметр, используя Obervable, а затем сделайте ваши вызовы Firestore из него

Определите ActiveRoute на вашем конструкторе: 

constructor(private route: ActivatedRoute) {}

Теперь получите ваш параметр маршрута и затем позвоните в службу 

ngOnInit() {
    this.route.params.subscribe(params => {
           this.item$ = this.service.getItem(params['id']); 
    });
}
...