如何将模块导入子模块？

Question

我在 Angular 应用程序中使用 ngx-translate。我在 app.module.ts:

中导入并完成所有操作

import {HttpClientModule, HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
 }

@NgModule({
imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent]

@NgModule({
imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
        loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
        }
    })
],
bootstrap: [AppComponent]

我正在导入和导出模块，就像 github ngx-translate 页面上的示例一样。翻译器工作正常。

但是我有一个子文件夹，里面有自己的 module.ts 文件，pages.module.ts。当我想在 pages 文件夹中的 html 文件上使用 ngx-translate 时，我有信息，该应用程序无法识别翻译管道。我想我需要将元素从 app.module.ts 导入页面。module.ts。我试过了，但我不知道怎么做。

Answer 1

很可能您必须在子模块 pages.module.ts 中使用 TranslateModule.forChild（而不是 TranslateModule.forRoot）。

在子模块中使用 "extend" = true 从根模块获取设置

TranslateModule.forChild({
  extend: true
})

Answer 2

创建共享模块文件(shared.module.ts)

import {HttpClient} from '@angular/common/http';
import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, '/assets/i18n/', '.json');
 }

@NgModule({
imports: [
TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    }
})
], export: [TranslateModule]

然后将共享模块导入您要在其中使用翻译服务的任何其他模块。

如何将模块导入子模块？

How to import module to child module?

ngx-translate

angular