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

Posted 2023-02-19

【中文标题】如何从延迟加载的模块访问 AppModule 模块导入？

【英文标题】：How do I Access AppModule Module imports from Lazy-loaded Modules?

【发布时间】：2020-12-21 19:21:22

【问题描述】：

如何从延迟加载的模块访问 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) 

这是导入 AngularMaterial 和 NXTranslate 的 sharedRootModule

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
  ]
....

【参考方案1】：

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

我将只使用导出上述延迟加载模块的 SharedModule。

【讨论】：

谢谢。我会尝试，但我不确定它是否会起作用。会让你知道。 Api 服务已设置为 providedIn: 'root'。 NXTranslate 正在使用一个自定义类，这会进行 API 调用并导致所有问题。查看我添加到问题中的代码块。