在 Angular 中访问 AppModule 中的 Service 变量

如何解决在 Angular 中访问 AppModule 中的 Service 变量

我正在 Angular 10 应用中实施 ngx-google-analytics，但该模块需要以这种方式实施 GA 跟踪代码：

NgxGoogleAnalyticsModule.forRoot(environment.ga)

代替环境变量或硬编码代码。我希望使用共享服务从数据库中获取它，然后在此处访问该变量。但同样在 appmodule 中无法实现。

按照@Nayan 的建议，我尝试了这个解决方案：

talk to Twilio sales

像这样：

export class AppModule { 
  constructor(private pubService: PubService) {
    console.log(this.pubService.StoreData);
    gcCode = this.pubService.StoreData['accessCodes'].filter(res => {
      res.codeName === 'gccode'
    }).codeValue;
  }
}

但就我而言，我已经使用了

{ provide: APP_INITIALIZER,useFactory: initializeApp,deps: [AppInitService],multi: true},

为了初始化服务以及正在发生的事情，构造函数会在服务实际从数据库中获取数据之前加载。

我应该以这种方式初始化服务吗？或者还有其他方法吗？

尝试将构造函数与 Promise 和 observables 一起使用，但是一旦我上线，api 调用需要时间并且应用程序在此之前被加载。我可以使用超时，但我不想。

export class AppModule { 
  constructor(private http: HttpClient) {
    // this.GetData().subscribe(res => {
    //   gcCode = res.filter(d => d.codeName == 'gccode')[0].codeValue;
    // });
    this.GetData();
  }

  GetData() {
    const url = (environment.apiURL+ '/api/pub/GetCodes');
    const promise = this.http.get(url).toPromise();
    promise.then((res: Array<any>) => {
      gcCode = res.filter(d => d.codeName == 'gccode')[0].codeValue;
    }).catch((error)=> {
      console.log(error);
    })
  }
}

解决方法

您可以使用手动方法。您的 Angular 应用是使用此代码从 main.ts 引导的

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

在调用 bootstrapModule 之前，您的 Angular 应用程序未初始化。 您可以轻松地将您的逻辑放在这里。

喜欢

fetch('api/path')
  .then(res => res.json())
  // Here you need to use any static prop or some global variable
  // because there is no DI yet
  .then(({key}) => MyService.key = key)
  // Bootstrap app when the key was fetched
  .then(() => 
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
  )
  .catch(err => console.error(err));

然后在您的模块中使用获取的密钥。

APP_INITIALIZER 永远不会工作，因为在模块导入解决后服务也解决了。