如何访问从延迟加载的模块导入的AppModule模块？

编程问答 2022-08-12

问题描述

如何从延迟加载的模块访问AppModule导入？

我的 Angular10 应用程序将 AngularMaterial和NXTranslate模块导入到AppModule中。 NxTranslate调用ApiService来获取包含数千个翻译的大型Lookup对象。 这是在AppModule的初始加载时翻译的。

该应用程序具有多个延迟加载的路由，这些路由也需要在其功能中使用AnagularMaterial和NXTranslate模块。

如果我使用 SharedModule加载模块，则将多次调用ApiService 。这显然不好。 它应该只调用一次ApiService和AngularMaterial，并且可用于所有模块。

我该如何解决？我在挣扎。 谢谢。

更新 （对不起，很长的帖子） 这是 NXTranslate 实现-它使用自定义类。

import { environment } from './../../../../environments/environment';
import { OSCITranslateService } from './translate.service';
import { NgModule,Injector } from '@angular/core';
import { CommonModule } from '@angular/common';
import {TranslateLoader,TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient,HttpClientModule} from '@angular/common/http';
import { Observable,of } from 'rxjs';
import { map } from 'rxjs/operators';

export class Customloader implements TranslateLoader {

localeResourcesUrl =
`${environment.baseUrl}${environment.apiUrl.localeResources}`;

constructor(private http: HttpClient) {}

getTranslation(lang: string): Observable<any> {
let  options;
const uri = `${this.localeResourcesUrl}${options && options.key ? 
'/' + options.key : ''}`;

let mapped = this.http.get(uri).pipe(
  map((response: any) => {
    let localeData = {};
    let languageCode = response?.languageVariantCode;

    response.resources.forEach(item => {
      localeData[item.keyName] = item.keyvalue;
    });
    return localeData;
  })
);
return mapped;
}
}

@NgModule({
declarations: [],imports: [
CommonModule,HttpClientModule,TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,useClass: Customloader,deps: [HttpClient]
    }
})
],exports: [ TranslateModule ]
})
export class NxTranslateModule { 

constructor(private http: HttpClient) {
}
}

这是 sharedRootModule ，用于导入AngularMaterial和NXTranslate 

import { SharedModule } from './shared.module';
import { NgModule,ModuleWithProviders } from '@angular/core';

@NgModule({
})
export class SharedRootModule {

  static forRoot(): ModuleWithProviders<SharedModule> {
    return {
      ngModule: SharedModule
    };
  }
}

在 AppModule 中，导入了SharedRootModule 

...
@NgModule({
  declarations: [
     AppComponent
  ],imports: [
    ...
    SharedRootModule.forRoot()
  ],exports: [
    ...
    SharedRootModule
  ]
....

解决方法

您是否担心可能会遇到多个ApiService实例？仅在AppModule中提供ApiService，或者甚至更好地在服务的装饰器中使用providedIn属性，以便在应用程序级别注入它。 （https://angular.io/api/core/Injectable#providedIn）

我只使用一个SharedModule来导出提到的延迟加载模块。

angularjavascriptlazy-loadingmodulemodule