Управление подписками для наблюдаемых AngularFire

Question

Привет сообщество Stackoverflow,

Я новичок в Angular и наблюдаемых, и мне интересно, как лучше всего управлять подписками на наблюдаемые. База данных для разрабатываемого мной веб-приложения - Google Firestore.

Мне нужно получить список всех документов в коллекции и прослушать изменения. На данный момент, вот как я управляю подпиской. Я просто подписываюсь в ngOnInit и отписываюсь в ngOnDestroy внутри компонента:

  export class AddDepartmentComponent implements OnInit, OnDestroy {

  FirestoreSubscription;
  businessUnitsListArray;

  constructor(private afs: AngularFirestore) { }

  @HostListener('window:beforeunload')
  ngOnDestroy(): void {
    this.FirestoreSubscription.unsubscribe();
  }

  ngOnInit() {
    this.FirestoreSubscription = this.afs.collection('BusinessUnits').valueChanges().subscribe(result => {
      this.businessUnitsListArray = result;

      // Do some manipulations with the data here
      // ...

    });

  }


}

Я не настоящий фанат наличия такой подписки во всех компонентах, которым требуется доступ к данным из Firestore. Я хотел бы создать сервис Firestore для управления всеми вызовами в БД. Сервис будет выглядеть примерно так (скажем, он содержит только одну эту функцию):

export class FirestoreService {

  constructor(private afs: AngularFirestore) {}

  retrieveAllBusinessUnits() {
    return this.afs.collection('BusinessUnits').valueChanges();
  }
}

Я бы назвал это так в компоненте:

  export class AddDepartmentComponent implements OnInit {

  businessUnitsListArray;

  constructor(private _firestoreService: FirestoreService) { }

  ngOnInit() {
    this.businessUnitsListArray = this._firestoreService.retrieveAllBusinessUnits();
  }


}

Это хороший способ сделать это? Это выглядит намного чище и гораздо проще поддерживать все в одном сервисе. Теперь, насколько я понимаю, читая документы angularfire, я понимаю, что эта функция возвращает наблюдаемое и управляет асинхронным c каналом в шаблоне для управления подпиской.

Мои вопросы:

1. Я считаю, что я должен подписаться на наблюдаемое, чтобы извлекать и манипулировать его данными. Разве это не то же самое, что делать то, что я делаю сейчас? Есть ли какие-либо преимущества использования FirestoreService, если мне нужно подписаться на наблюдаемое в моем компоненте, чтобы потом отписаться позже?

2. Получение данных из Firestore таким способом (с помощью FirestoreService ) как бы я go о манипулировании данными (по-разному для разных компонентов, следовательно, не в сервисе) более сложным способом, чем то, с чем может справиться шаблон HTML перед его использованием в компоненте без простой подписки на него затем отписаться в ngOnDestroy, который вернет меня на круги своя, как указано в # 1? Используя метод, который я использую в данный момент, у меня есть целый блок (в скобках подписки), чтобы выполнять любые виды манипуляций, которые мне нравятся, будь то запуск другой функции при изменении возвращаемых данных или просто фильтрация возвращаемых данных в определенном порядке. c способ, которым функциональность запросов к Firestore не может быть легко обработана.

3. Нужно ли мне отписываться где-либо, даже если я никогда не подписывался явным образом (опять же, при условии, что я абсолютно НЕ ДОЛЖЕН подписываться на наблюдаемое)?

Спасибо всем за поддержку!

Answer 1

Вы можете попробовать следующий подход

    // Service
        export interface dataModel{
           id: number;
           name: string;
        }

        export class FirestoreService {

          dataCollection: AngularFirestoreCollection<dataModel>;

          constructor(private afstore: AngularFirestore) {}

          getData() {
           this.dataCollection = this.afstore.collection('path');
           return this.dataCollection.valueChanges();
           // or use pipe operator and manipulate the data
         }

        }


  // Component

   dataList: dataModel[];

   constructor(private firestoreService: FirestoreService) {}

   ngOnInit() {
     this.firestoreService.getData().subscribe((res: dataModel[]) => {
       this.dataList = res;
    }, err => {
      // handle err 
   });
  }