Question

由于我的配置数据在运行时加载而AnuglarFire2需要模块声明中的数据，因此出现问题。我可以通过直接注入访问数据，但我无法弄清楚如何将数据传输到模块文件中的AngularFireModule。

在运行时加载数据是将配置数据提供给应用程序的首选方法。所以，我无法改变这个过程。因此，我需要找到解决问题的方法。

AngualrFire2设置页面 https://github.com/angular/angularfire2/blob/master/docs/1-install-and-setup.md

以下是我的文件：

** Config Data Loaded（main.ts）**

function processConfigData(config, env) {
    platformBrowserDynamic([
      {provide: "appConfig", useValue: config},
      {provide: "appEnv", useValue: env}
    ]).bootstrapModule(AppModule);
}

配置数据从服务器中提取并传递到应用程序。

然后我从直接注射中获取数据。

**配置服务（app-config.service.ts）**

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

// Code came from: 
https://gist.github.com/fernandohu/122e88c3bcd210bbe41c608c36306db9


@Injectable()

export class AppConfig {


constructor(@Inject("appConfig") private config, @Inject("appEnv") private env) {
}

/**
 * Use to get the data found in the second file (config file)
 */
public getConfig(key: any) {
  return this.config[key];
}

/**
 * Use to get the data found in the first file (env file)
 */
public getEnv(key: any) {
  return this.env[key];
}

此时，我只知道如何通过直接注入获取配置数据。我无法弄清楚如何让它进入模块来配置AngularFire2。以下是AngularFire2建议设置的代码：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Must export the config
export const firebaseConfig = {
  apiKey: '<your-key>',
  authDomain: '<your-project-authdomain>',
  databaseURL: '<your-database-URL>',
  storageBucket: '<your-storage-bucket>',
  messagingSenderId: '<your-messaging-sender-id>'
};

@NgModule({
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

非常感谢任何解决此问题的帮助。

Answer 1

对AngularFireModule.initializeApp的调用没有做任何神奇的事情，只是returns the module along with some providers：

export class AngularFireModule {
  static initializeApp(config: FirebaseAppConfig, authConfig?: AuthConfiguration, appName?: string): ModuleWithProviders {
    return {
      ngModule: AngularFireModule,
      providers: [
        { provide: FirebaseUserConfig, useValue: config },
        { provide: FirebaseConfig, useFactory: _getDefaultFirebase, deps: [FirebaseUserConfig] },
        { provide: FirebaseAuthConfig, useValue: authConfig },
        { provide: FirebaseAppName, useValue: appName }
      ]
    }
  }
}

请注意，Firebase配置是使用FirebaseUserConfig令牌提供的。

AngularFireModule.initializeApp中使用的某些令牌不公开，因此最好的方法是调用AngularFireModule.initializeApp并从结果中过滤配置提供程序。然后，可以使用您动态获取的信息在platformBrowserDynamic的调用中使配置提供程序可用：

import {
  AngularFireModule,
  AuthMethods,
  AuthProviders,
  FirebaseUserConfig
} from "angularfire2";

// Call initializeApp, passing an empty config object:

const angularFireImport = AngularFireModule.initializeApp({}, {
  method: AuthMethods.Password,
  provider: AuthProviders.Password
});

// Filter the config from the providers:

angularFireImport.providers = angularFireImport.providers.filter(
  (provider: any) => provider.provide !== FirebaseUserConfig
);

@NgModule({
  bootstrap: [AppComponent],
  imports: [
    angularFireImport,
    BrowserModule,
    FormsModule
  ]
})
class AppModule {}

// Provide the Firebase config in the platformBrowserDynamic call:

function processConfigData(config, env) {

  const firebaseConfig = {
    apiKey: '<your-key from the dynamic config>',
    authDomain: '<your-project-authdomain from the dynamic config>',
    databaseURL: '<your-database-URL from the dynamic config>',
    messagingSenderId: '<your-messaging-sender-id from the dynamic config>',
    storageBucket: '<your-storage-bucket from the dynamic config>'
  };

  platformBrowserDynamic([
    { provide: "appConfig", useValue: config },
    { provide: "appEnv", useValue: env },
    { provide: FirebaseUserConfig, useValue: firebaseConfig }
  ]).bootstrapModule(AppModule);
}

模块中的AngularFire2 App Init与动态配置数据冲突

1 个答案: