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

Question

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

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

这是我的 home.component.ts：

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  
  constructor(private translateServeice: TranslateService) { }

  ngOnInit(): void {
  }

}

这是我的landingpage.module.ts

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

我是否遗漏了模块中的任何参考资料，或者我这样做的方式是错误的？

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

[编辑]

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

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

Answer 1

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

或制作 SharedTranslateModule import 和 export TranslateModule 和 添加到 app.module.ts 中以导入

工作了stackblitz

Answer 2

我遇到了类似的问题，通过将 home 模块添加到 app.module.ts 来解决问题。

如果您没有 home 模块，请将 home 组件添加到应用程序模块文件的声明中。

Answer 3

我来到这里只是为了寻找类似的东西...我在我的功能模块（独立模块）中遇到了相同的错误“找不到名称为“翻译”的管道”。我尝试导入模块“TranslateModule”并注入 TranslateService，但没有成功。有这方面的线索吗？