在 Angular 中动态配置 Firebase 环境

Question

我的移动应用程序中有一个数据列表，对于每个数据，我可以有不同的 firebase 配置文件。要求是，当我点击任何数据时，它会向我们的服务器发出请求并从那里提取 firebase 配置。

配置对移动应用程序可用后，它将使用此配置与 firebase 连接，然后检索数据并执行一些操作。

有可能实现吗？

或者更具体地说，我可以在 mycomponent.component.ts 中的构造函数或 ngOnInit() 中执行 AngularFireModule.initializeApp(environment) 而不是在 myModuleName.Module.ts 中执行。

Answer 1

通过AngularFireModule.initializeApp(environment)，你做了两件事：

正在使用您的环境变量初始化 AngularFire 模块
导入模块

因此您至少需要将导入部分保留在一个模块中。也许您可以检查 firebase 模块是否允许在导入后进行初始化，这意味着：

导入模块（在一个模块中）
稍后（当您获得配置时）'initialize' Firebase 模块

如果这不可能，我建议延迟加载您的 firebase 模块： https://angular.io/guide/lazy-loading-ngmodules

注意：由于您需要初始化 firebase 模块，因此您可能需要将 Firebase 模块包装在标准模块中。

Answer 2

这就是我完成它的方式。我没有在应用程序模块中使用它，而是专门将它用于需要它的模块。

在module.ts

    import { AngularFirestoreModule } from 'angularfire2/firestore';
    import { AngularFireDatabaseModule } from 'angularfire2/database';
    @NgModule({
      declarations: [
       ...
      ],
      imports: [
        ...
        AngularFirestoreModule,
        AngularFireDatabaseModule],
      exports: [
       ...      ],
      providers: [
       ...
      ]
    })

在component.ts

import { AngularFirestore } from 'angularfire2/firestore';
import { _firebaseAppFactory } from "angularfire2/firebase.app.module";


  angFirestore: AngularFirestore

ngOnInit(){
    this.angFirestore = new AngularFirestore(_firebaseAppFactory(environment.firebase, environment.localAppName.toString()), false);
    }

ionViewWillUnload(){
      this.clearFirebaseInfo();
      if(this.angFirestore && this.angFirestore.app){
        this.angFirestore.app.delete();
      }
   }

在 Angular 中动态配置 Firebase 环境

Configure Firebase environment dynamically in Angular

firebase

ionic-framework

firebase-realtime-database

angular-module

angular