如何在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 相关文章推荐
FCK调用方法..
Dec 21 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
Sep 20 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
react 组件传值的三种方法
Jun 03 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
解决vue项目中出现Invalid Host header的问题
Nov 17 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
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
zend optimizer在wamp的基础上安装图文教程
2013/10/26 PHP
PHP连接SQLServer2005方法及代码
2013/12/26 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
thinkphp四种url访问方式详解
2014/11/28 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
Python连接mysql数据库的正确姿势
2016/02/03 Python
python try 异常处理(史上最全)
2019/03/07 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
用python-webdriver实现自动填表的示例代码
2021/01/13 Python
scrapy-splash简单使用详解
2021/02/21 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
幼儿园教师考核制度
2014/02/01 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
春节请假条
2014/04/11 职场文书
勤俭节约演讲稿
2014/05/08 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
纪委书记群众路线整改措施思想汇报
2014/10/09 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android