• 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吧

  • 相关阅读:
    名字对战,看看你名字里蕴藏的力量
    趣味小游戏,测试你们做过的傻事
    贪吃蛇小游戏的初步尝试制作
    实现成绩表的初步想法
    结构体的一些小知识点
    慢慢完善-小游戏之推箱子
    よんにち
    さんか表单 框架 样式表和样式表选择器
    Two Day
    One day
  • 原文地址:https://www.cnblogs.com/weizhibin1996/p/9677479.html
Copyright © 2020-2023  润新知