时间戳

首页 > 解决方案 > 如何从延迟加载的模块访问 AppModule 模块导入？

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

问题描述

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

标签： javascriptangularmodulelazy-loading

解决方案

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

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

推荐阅读