在 Angular 中动态配置 Firebase 环境答案

【问题标题】：Configure Firebase environment dynamically in Angular在 Angular 中动态配置 Firebase 环境
【发布时间】：2019-12-04 11:23:02
【问题描述】：

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

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

有可能实现吗？

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

【问题讨论】：

您好，我正在寻找相同的功能。你能让它工作吗？非常感谢，弗兰克

标签： angular firebase ionic-framework firebase-realtime-database angular-module

【解决方案1】：

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

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

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

导入模块（在一个模块中）
稍后（当您获得配置时）“初始化”Firebase 模块

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：