如何在Angular8.0下使用ngx-translate进行国际化配置


Posted in Javascript onJuly 24, 2019

一. 将ngx-translate添加到Angular应用程序中

npm install @ngx-translate/core @ngx-translate/http-loader rxjs --save

二.在app.module.ts中初始化翻译TranslateModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// import ngx-translate and the http loader
import {TranslateLoader, TranslateModule} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClient, HttpClientModule} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // ngx-translate and the loader module
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// required for AOT compilation
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

三.在app.component.ts中设置初始值

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
  }
}

四.在assets/i18n文件下创建让我们为英文翻译创建相关语言JSON文件,如en.json文件

{
 "demo.title": "Translation demo",
 "demo.text": "This is a simple demonstration app for ngx-translate"
}

五.在app.component.html中使用

<div>
  <!-- translation: translation pipe -->
  <h1>{{ 'demo.title' | translate }}</h1>

  <!-- translation: directive (key as attribute)-->
  <p [translate]="'demo.text'"></p>

  <!-- translation: directive (key as content of element) -->
  <p translate>demo.text</p>
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript动态创建form表单并提交的实现方法
Dec 10 Javascript
JavaScript中清空数组的方法总结
Dec 02 Javascript
js实现日历的简单算法
Jan 24 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
Aug 31 Javascript
小程序实现单选多选功能
Nov 04 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
js new Date()实例测试
Oct 31 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
浅谈JavaScript浅拷贝和深拷贝
Nov 07 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 #Javascript
vue滚动tab跟随切换效果
Jun 29 #Javascript
Vue.js实现tab切换效果
Jul 24 #Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 #Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 #Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 #Javascript
javascript中call,apply,callee,caller用法实例分析
Jul 24 #Javascript
You might like
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
ThinkPHP查询中的魔术方法简述
2014/06/25 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
显示、隐藏密码
2006/07/01 Javascript
通过隐藏option实现select的联动效果
2009/11/10 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
javascript批量修改文件编码格式的方法
2015/01/27 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
jQuery实现简洁的轮播图效果实例
2016/09/07 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
nodejs搭建本地服务器轻松解决跨域问题
2018/03/21 NodeJs
在小程序/mpvue中使用flyio发起网络请求的方法
2018/09/13 Javascript
粗略分析Python中的内存泄漏
2015/04/23 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
Python中浅拷贝copy与深拷贝deepcopy的简单理解
2018/10/26 Python
python Shapely使用指南详解
2020/02/18 Python
python实现简单井字棋游戏
2020/03/04 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
美国知名的旅游网站:OneTravel
2018/10/09 全球购物
Coccinelle官网:意大利的著名皮具品牌
2019/05/15 全球购物
伦敦香水公司:The London Perfume Company
2019/11/13 全球购物
澳大利亚家具商店:Freedom
2020/12/17 全球购物
面向对象编程的优势是什么
2015/12/17 面试题
房屋买卖委托公证书
2014/04/08 职场文书
服务理念标语
2014/06/18 职场文书
2014年统战工作总结
2014/12/09 职场文书
圣诞晚会主持词
2015/07/01 职场文书
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技