时间戳

首页 > 解决方案 > 如何在模块组件中使用 ngx-translate？

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

问题描述

我正在研究 ngx-translate。正如几乎教程所描述的那样，我将它带到 app.component.html 中。但是如何在我的模块的组件中做到这一点？我是否有每个模块的所有步骤，还是有更简单的方法？如果我将 app.module.ts 中的所有步骤带到 my.module.ts，我会在运行 ng serve 时收到一条错误消息。

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

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

标签： angularngx-translate

解决方案

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

或使导入和导出TranslateModule的 SharedTranslateModule 并添加到app.module.ts 以导入

工作堆栈闪电战

推荐阅读