Извлекайте данные из Firestore только один раз при запуске приложения, распространяйте их оттуда

Question

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

export const CASES: Case[] = [
  { id: 0,
    name: 'Diesel',
    portfolioImage: '/assets/images/portfolio/diesel.png',
    image: '/assets/images/diesel.jpg',
    image2: '/assets/images/diesel/diesel-sunflower.png',
    image3: '/assets/images/diesel/diesel-cap.png',
    link: '/cases/diesel',
    header: 'black'
  },

  { id: 1,
    name: 'WeWork Berlin',
    portfolioImage: '/assets/images/portfolio/berlin.png',
    image: '/assets/images/berlin.jpg',
    image2: '/assets/images/wework/berlin-logo.png',
    image3: '/assets/images/wework/berlin-building.png',
    link: '/cases/wework',
    header: 'white'
  }
];

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

export class PortfolioComponent implements OnInit {

  cases;

  constructor(private db: AngularFirestore) { }

  ngOnInit() {
    this.db.collection('entries').valueChanges()
      .subscribe(val => this.cases = val);
  }

}

Это работает, но я хочу назвать это только один раз - если быть точным, есть ли способ получить данные при инициализации приложения ...

• и либо вставьте его в макет, который я использовал раньше,
• или вставьте данные в массив, который можно использовать глобально

Для этого я хочу добиться, чтобы данные загружались только один раз, вставлялись и распространялись оттуда. Так же, как я сделал это без Firestore.

Answer 1

Для извлечения данных при запуске приложения необходимо использовать APP_INITIALIZER, который является встроенным экземпляром InjectionToken.Примером app.module.ts будет:

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { AppInitService } from './app-init.service';

export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.Init();
  }
}

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [ 
    AppInitService,
    { provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true}
  ],
})
export class AppModule { }

В вашем AppInitService вы должны сделать запрос, который будет извлекать данные, и вы должны сохранить его, если вы используете NGRX в своем магазине, если нет,в какой-то одной корневой службе.Когда вы извлекаете данные, вы должны вернуть обещание, которое разрешит.

import { Injectable } from '@angular/core';

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

  // note dataSerice is service where you'll hold your data on fetch
  constructor(private db: AngularFirestore, private dataService: DataService) { }

  Init(): Promise<any> {
     return new Promise((resolve, reject) => {
this.db.collection('entries').valueChanges()
      .subscribe(val => {
         this.dataService.data = val; // assign data to data service
         resolve(true);
      });
     })
  }
}

Теперь, в этом случае, введите dataService: DataService куда вам нужно, и ваш data будет храниться в свойстве data.