Piattaforma di nuova generazione

Caricamento dei bundle per un nuovo modulo funzione

Modifica online

Per supportare la localizzazione e l'internazionalizzazione, caricare il JSON dei bundle di traduzione per un modulo. Il codice di configurazione per il caricamento dei bundle di traduzione e l'impostazione della lingua viene generato automaticamente quando il modulo viene creato dal seguente comando:

yarn new-extension-feature

Procedura

  1. I bundle di conversione specifici della funzione e i bundle comuni utilizzati dalla libreria di componenti principali e comuni vengono caricati nel modulo root dell'applicazione dell'applicazione angolare Spa singola. La lingua che deve essere utilizzata dal servizio di conversione è impostata nel costruttore.
    Nota: il seguente codice di esempio è solo per la tua comprensione. Assicurarsi di non modificare il codice generato automaticamente per caricare la traduzione.
    Il seguente frammento di codice illustra il file <store-temp>/extensions/features/<feature-name>/src/app/app.module.ts :
    export class BackroomPickBundlesModule {
  static bundles: Array<any> = [
    {
      prefix: './assets/backroom-pick/i18n/',
      suffix: '.json'
    }
  ].concat(CommonBundlesModule.bundles);
}


export function BackroomPickBundlesModuleHttpLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [].concat(BackroomPickBundlesModule.bundles));
}


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    CoreModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: BackroomPickBundlesModuleHttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler
      },
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})


 export class AppModule implements OnDestroy{
  private langSubscription: Subscription;


  constructor(private translateService: TranslateService,@Inject('STORE_LOCALE_CODE') private _locale: string) {
    this.translateService.setDefaultLang(LocalizationService.getFallbackLanguage());
    this.langSubscription = LocalizationService.lang$.subscribe(lang => {
      this.translateService.use(lang);
    });
    LocalizationService.setLocale(_locale);
  }


  ngOnDestroy() {
    if (UIUtil.isNotVoid(this.langSubscription)) {
      this.langSubscription.unsubscribe();
    }
  }
}
  2. Il modulo con caricamento lento inizializza TranslationModule richiamando il metodo forChild() e passando anche una configurazione extend:true aggiuntiva. Questa configurazione unisce le traduzioni caricate lente con le traduzioni caricate inizialmente nel modulo root dell'applicazione.
    Il seguente frammento di codice illustra il file <store-temp>/extensions/features/<feature-name>/src/app/features/<module-name>/<module-name>.module.ts :
    @NgModule({
  imports: [
    BackroomPickRoutingModule,
    CommonModule,
    CommonComponentsModule,
    FunctionalComponentsModule,
    FormsModule,
    NgbModule,
    TranslateModule.forChild({
      extend: true,
    })
  ]
})
export class BackroomPickModule {}