web-dev-qa-db-ja.com

Ngxは共有/遅延ロードモジュールで変換します

おそらく最も一般的な質問の1つですが、 ドキュメント といくつかの その他の質問 は、問題を解決しようとしていることがわかりましたが、これを修正する方法がわかりません。

これが私の構造です：

enter image description here

  • アプリモジュールはもちろん、ブートストラップされるメインモジュールです
  • Countryselectorモジュール：（IPに基づいて）デフォルトの国をロードし、ブラウザに基づいて使用する言語を決定します。これは基本的に、使用する国/言語を決定するコア機能であり、ユーザーが国/言語を変更するためのドロップダウンが含まれています。
  • チェックアウトモジュール、選択モジュール、支払いモジュールはすべてルーティングで遅延ロードされます。

AppModule

_export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    ContrySelectorModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  export class AppModule { }
_

CountrySelectorModule

_@NgModule({
  declarations: [CountryselectorComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    CountryselectorComponent
  ]
})
export class ContrySelectorModule { }
_

選択モジュール：

_@NgModule({
  declarations: [SelectionComponent],
  imports: [
    CommonModule,
    SelectionRoutingModule,
    UspblockModule,
    TranslateModule.forChild({//or forRoot, no idea how to configure this
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }})
  ],
})
export class SelectionModule { }
_

ここで問題は、国選択モジュールがすでにこれを処理しているため、遅延ロードされたモジュール内で言語構成を再度実行したくないということです。レイジーロードされたモジュールを正しく構成する方法がわかりません（実際には、countrySelectorModuleが正しく行われているかどうかはわかりません）。 標準のgithubのドキュメント を使用することはできませんでした。私は.forChild()をいじってみましたが、今のところうまくいきません。

共有モジュールは必要ですか？ countrySelectorModuleをどこにでもインポートする必要がありますか（推奨されません）？カスタムローダー？ t.b.h.私にはわからないので、ドキュメントはより高度なシナリオでは少し短いです。

angularlazy-loadingangular7ngx-translate
14
CularBytes

私はこれを次のようにして解決しました：

  1. 以下のコードを使用して、CoreModule（基本的に共有モジュール）を作成します

CoreModule

_export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forChild({
      loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    isolate: false
}),
  ],
  exports: [TranslateModule],
})
export class CoreModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: CoreModule,
      providers: [ShoppingCartService, AccountService]
    }
  }
}
_

したがって、これにより、CoreModuleをインポートするすべてのモジュールで、TranslateModuleが同じ構成を使用するようになります。必ずエクスポートしてください。 forRoot()は、ShoppingCartServiceとAccountServiceが1つのインスタンスにすぎず、別のサービスを作成するすべての遅延モジュールではないことを確認して解決しました。

  1. AppModuleを変更します。

AppModule

_@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      isolate : false
    }),
    CoreModule.forRoot(),
    ContrySelectorModule,

  ],
  providers: [    ],
  bootstrap: [AppComponent]
})
export class AppModule { }
_

AppModuleがメインのエントリポイントであるため、ここでforRoot()を呼び出してTranslateModuleを呼び出します。

  1. 遅延読み込みされたモジュールは、メソッド呼び出しなしでCoreModuleをインポートするだけです。また、私の例ではCountrySelectorModuleはCoreModuleのみをインポートする必要があり、それ以外は必要ありません。
17
CularBytes