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);
  }

}

它可以工作，但是我只想调用一次-确切地说，有一种方法可以在应用程序init上获取数据。

然后将其插入到我之前使用的模拟中
或将数据插入可以全局使用的数组中

这样做，我想实现仅获取一次数据，将其插入并从那里分发数据的目的。就像我没有使用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 { }

如果您在商店中使用NGRX，则应该在AppInitService中发出一个将提取数据的请求并将其保留，如果不是，则在某个单例根服务中使用。提取数据时，您应该返回能够解决的诺言。

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属性中。

仅在应用启动时从Firestore提取数据，然后从那里分发数据

1 个答案: