Angular2采坑使用ngx-translate

有版本问题

这个是因为版本原因导致的,将@ngx-translate/core替换成npm install @ngx-translate/core@9.1.1 --save版本就不会再报错。

使用方式

在最app.module引入

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


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

// 上面import完,还要在这里import
  imports: [
    ViserModule,
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),

在最上层的组件引用

比如这各项目的爸爸元素是home,在home里面用了一个<router-outlet>

而我添加选择功能的地方是上面

然后在该爸爸组件里面使用

import服务,依赖注入

import {TranslateService} from '@ngx-translate/core';


constructor(private _App: AppService,private _message: NzMessageService,
              private _User: UserService,private router: Router,
              private route:ActivatedRoute,private translate: TranslateService) {
    //添加语言支持
    translate.addLangs(['zh', 'en']);
    //设置默认语言
    translate.use('en');
  }


changeLanguage(language){
    // alert(language);
    this.translate.use(language);
  }

先写好中文的,然后全局替换即可

对于渲染后的数据怎么显示啊? 因为没有办法使用占位符

原来中文也可以的!

有一些写死在数组的怎么办!

直接改成英文,毕竟简单的英文大家都懂!

zh-CN的问题

默认直接使用zh或者en,选择也只有zh和en,不管zh-CN的问题,也不用写代码判断

还算OK吧

原文地址:https://www.cnblogs.com/weizhibin1996/p/9677479.html