Угловое поведение субъекта с Firestore - PullRequest
Новая
       35

Угловое поведение субъекта с Firestore

0 голосов
/ 02 октября 2018

Исключительно новый для BehaviourSubjects и не совсем уверен, что я подошел к этому наилучшим образом.

Я создал сервис, который запрашивает Firestore.Я попытался создать BehaviourSubject на основе возвращенных данных, чтобы я мог использовать его в нескольких компонентах.Как лучше всего убедиться, что каждый компонент всегда получает последнюю обновленную версию?

В моем приложении есть части, в которых я обновлю firestore новыми значениями.Когда это произойдет, будет ли он автоматически синхронизироваться через службу и с моими компонентами?

Буду очень признателен за примеры передового опыта или за то, как заставить это работать должным образом.Спасибо!

Сервис 

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class SettingsService {

  private settingsDocRef: AngularFirestoreDocument<any>;


  settingsDocument = new BehaviorSubject(this.settingsDocRef);
  settings$: Observable<any> = this.settingsDocument.asObservable();

  constructor(private readonly afs: AngularFirestore) {
    this.settingsDocRef = this.afs.doc(`user_settings/useridishere`);
    this.settings$ = this.settingsDocRef.snapshotChanges();
    this.settings$.subscribe((value) => {
      const data = value.payload.data();
      this.settingsDocument.next(data);
    });
  }
}

Component.ts 

import { Component, OnInit } from '@angular/core';
import { SettingsService } from '../settings.service';
import { Observable } from 'rxjs';

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

export class HelloComponent implements OnInit {

  issueName: string;

  // OR should this be an observable?
  // issueName: Observable<string>


  constructor(private settingsService: SettingsService ) {}

  ngOnInit() {
     this.settingsService.settings$.subscribe((settings) => {
      this.issueName = settings.usersetting_issuename;
    })
  }

}

HTML 

<div>
  {{ issueName }}
</div> 

<!-- OR if it's supposed to be an observable? -->
<div>
  {{ issueName | async }}
</div>

1 Ответ

0 голосов
/ 04 октября 2018

Вам не нужно использовать тему в вашем сервисе, чтобы отслеживать ваши данные.Только текущий загруженный компонент должен подписаться на ваши данные.

Служба

Ваша служба будет отвечать за определение и возврат наблюдаемых объектов, связанных с вашей базой данных пожарного депо. 

import { Injectable } from '@angular/core';
import { Observable} from 'rxjs';
import { AngularFirestore, AngularFirestoreDocument } from '@angular/fire/firestore';

@Injectable({
  providedIn: 'root'
})
export class SettingsService {


  constructor(private readonly afs: AngularFirestore) {}

  getUserSettings(userID: string): Observable<any> {
      const settingsDocRef = this.afs.doc(`user_settings/${userID}`);
      return settingsDocRef.valueChanges();
  }
}

Я использовал valueChanges () вместо snapshotChanges (), поскольку вам нужны только данные вашего документа.

Component.ts 

    import { Component, OnInit } from '@angular/core';
    import { SettingsService } from '../settings.service';
    import { Observable } from 'rxjs';

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

    export class HelloComponent implements OnInit {

      issueName$: Observable<string>;

      constructor(private settingsService: SettingsService ) {}

      ngOnInit() {
         this.issueName$ = this.settingsService.getUserSettings('yourUserID').pipe(
             map((settings) => settings.usersetting_issuename)
         );
      }

    }

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

HTML

, как вы сами предложили, вы подписываетесь на свое наблюдаемое в шаблоне. 

<!-- OR if it's supposed to be an observable? -->
<div>
  {{ issueName$ | async }}
</div>
...