如何在模块组件中使用 ngx-translate？

Question

我正在研究 ngx-translate。正如几乎教程所描述的那样，我将其引入 app.component.html 中。但是如何在我的模块的组件中执行此操作？我是否有每个模块的所有步骤，或者有更简单的方法吗？如果我将所有步骤从 app.module.ts 带到 my.module.ts，我会在运行 ngserve 时收到一条错误消息。

\n

ERROR in src/app/landing-page/home/home.component.html:4:22 - error NG8004: No pipe found with name \'translate\'.\n

\n

这是我的 home.component.ts：

\n

import { Component, OnInit } from \'@angular/core\';\nimport { TranslateService } from \'@ngx-translate/core\';\n\n@Component({\n  selector: \'app-home\',\n  templateUrl: \'./home.component.html\',\n  styleUrls: [\'./home.component.scss\']\n})\nexport class HomeComponent implements OnInit {\n  \n  constructor(private translateServeice: TranslateService) { }\n\n  ngOnInit(): void {\n  }\n\n}\n

\n

这是我的landingpage.module.ts

\n

  import { NgModule } from \'@angular/core\';\n    import { CommonModule } from \'@angular/common\';\n    import { HomeComponent } from \'./home/home.component\';\n    import { TranslateLoader, TranslateModule, TranslateService } from \'@ngx-translate/core\';\n    import { HttpClient, HttpClientModule } from \'@angular/common/http\';\n    import { TranslateHttpLoader } from \'@ngx-translate/http-loader\';\n    \n    export function createTranslateLoader(http: HttpClient) {\n      return new TranslateHttpLoader(http, \'./assets/i18n/\', \'.json\');\n    }\n    \n    @NgModule({\n      declarations: [\n        HomeComponent\n      ],\n      imports: [\n        CommonModule,\n        HttpClientModule,\n        TranslateModule.forChild(\n          {\n            loader: {\n              provide: TranslateLoader,\n              useFactory: (createTranslateLoader),\n              deps: [HttpClient]\n            },\n          }\n        )\n        \n      ],\n      exports: [\n        HomeComponent\n      ]\n    })\n    export class LandingPageModule { }\n

\n

我是否错过了模块中的任何引用，或者我\xe2\x80\x99m 执行此操作的方式错误？

\n

在模块组件中使用 ngx-translate 的通常方法是什么？

\n

[编辑]

\n

这是我的演示项目：https ://github.com/Christoph1972/angular-i18n-demo

\n

请问有人可以展示如何运行它吗？

\n

Answer 1

只需将 TranslateModule 添加到组件模块的导入中

或者创建SharedTranslateModule来导入和导出 TranslateModule并添加到 app.module.ts 中进行导入

工作堆栈闪电战