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

一. 将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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Angular2+国际化方案（ngx-translate）的示例代码

    本文只针对ngx-translate/core 6.x版本,如果你使用的是5.x或者更低的版本,请参照以下链接. https://github.com/ngx-translate/core/blob/fb02ca5920aae405048ebab50e09db67d5bf12a2/README.md 安装 首先需要安装npm依赖: npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --sav

  • Angular2中如何使用ngx-translate进行国际化

    Angular2中如何使用ngx-translate进行国际化

    相较于AngularJS中的ng-translate, angular2也有适合自己的国际化模块,就是ngx-translate. 项目地址:https://github.com/ngx-translate/core 使用angular-cli初始化项目: ng new my-project 使用npm安装ngx-translate模块 npm install --save @ngx-translate/core npm install --save @ngx-translate/http-lo

  • Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    Angular4项目中添加i18n国际化插件ngx-translate的步骤详解

    前言 本文将介绍在 Angular4 项目中配置 ngx-translate i18n 国际化组件的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: npm 安装 ngx-translate 模块 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 在 Angular 项目配置 app.module.ts 添加 import { TranslateLoader, Tr

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

    一. 将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

  • 如何在IIS环境下配置Rewrite规则 图文

    如何在IIS环境下配置Rewrite规则 图文

    URL 静态化可以提高搜索引擎抓取,开启本功能需要对 Web 服务器增加相应的 Rewrite 规则,且会轻微增加服务器负担.本教程讲解如何在 IIS 环境下配置各个产品的 Rewrite 规则. 一.首先下载 Rewrite.zip 的包,解压到任意盘上的任意目录. 各个产品的 Rewrite 规则包不同,请选择对应的产品下载对应的 Rewrite 规则. Discuz!6.0.0/6.1.0 的 Rewrite 规则下载地址:Rewrite.zip UCenter Home1.0.0 的 R

  • 如何在Android Studio下进行NDK开发

    在AS中进行NDK开发之前,我们先来简单的介绍几个大家都容易搞懵的概念: 1. 到底什么是JNI,什么是NDK? 2. 何为"交叉编译"? 先看什么是JNI?JNI的全称就是Java Native Interface,即java本地开发接口.可能大家和我一样,一听到接口什么的就犯懵:"我也知道这是java本地开发接口的意思,但它具体是个什么意思我还是搞不明白."其实JNI它就是一种协议,一说协议,那它就是对某种东西的一个规范和约束,说的好听一点就是标准化.如果你想用

  • 如何在Linux操作系统下安装Apache服务的方法实例详解

    链接下载: 操作环境 VMware虚拟机中CentOS 7.6 SecureCRT Xftp(Xmanager) 需求分析 使用Apache服务实现访问http 操作步骤 1.挂载光盘 [root@localhost ~]# mount /dev/cdrom /mnt 查看是否挂载 [root@localhost ~]# df -Th 2.从源码包编译安装程序 (编译安装) [root@localhost Packages]# yum -y install gcc gcc-c++ make 3.

  • IOS swift3.0 下闭包语法整理

    IOS swift3.0 下闭包语法整理

    IOS swift3.0 下闭包语法整理 一.闭包的概念 有oc基础的都知道,闭包其实是oc里面的block,语法格式不一样,但作用是一样的.主要是用于callBack(异步回调)或者两个类之间的通信.它的本质一个函数,一个可执行的代码块,只是这个函数是没有名字的,也就是匿名函数.你也可以把他看作如 int.float一样,是一种数据类型,一种可以作为参数传递的数据类型. 二.基本语法 1.闭包的声明 //定义一个求和闭包 //闭包类型:(Int,Int)->(Int) let add:(Int

  • ASP.NET 2.0下的条件编译

    在Web开发中测试单个页面的功能实在是太麻烦,从首页用户名.密码进去后,经过一些操作后才可以来到你要测试的那个页面.(其实无论做什么的开发,测试单个功能都是很麻烦).抱着小心谨慎的态度,我一般喜欢写几段测一次,如果每次都兴师动众的启动整个项目来测试显然是很不经济的做法. 我一般会在Solution中新增一个用于测试用的配置,在其中增加一个"Test"之类的编译指令,然后在代码中,把一些测试条件,测试方法放到这个指令下.在开发团队还没有引进单元测试之类的概念的时候,我可不想用新增一个测试

  • CentOS 7.0下使用yum安装mysql的方法详解

    CentOS7默认数据库是mariadb,配置等用着不习惯,因此决定改成mysql,但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2.安装mysql-community-release-el7-5.noarch.rpm包 $ sudo rpm -ivh mys

  • RedHat 9.0下安装igenus实录

    在REDHAT9.0下安装igenus bluelotus 2003.06.16 Redhat9.0+Qmail+smtp-auth+Vpopmail+MySQL+Igenus,实例:http://0874.cn/mail 一.安装环境 及准备工作 安装Redhat9.0,安装时选取安装apache.php.mysql,可省去以后自已编译安装的麻烦,mysql要注意选取mysql-devel开发包,mysql的头文件和库文件分别在/usr/include/mysql和/usr/lib/mysql

  • 有了SSL证书，如何在IIS环境下部署https

    有了SSL证书，如何在IIS环境下部署https

    昨天各位小伙伴都很开心的领取了自己的SSL证书,但是大部分小伙伴却不知道如何部署,也许是因为第一次接触SSL这种高端的东西吧,不过个人觉得就是懒懒懒...本来小编也挺懒的,但是答应了各位小伙伴的,那么今天就教大家如何在IIS环境下部署HTTPS证书吧.(建议在PC端阅读) 1.首先我们要取走我们的证书,保存在我们本地的电脑里,然后复制到服务器即可. 2.取走后接下来干嘛?当然是打开文件看看里面有些什么啊.我们找到IIS那个压缩包并解压. 3.解析得到pfx文件,也就是我们需要部署域名的证书文件.

  • 六十四、WINOWS NT4.0下的网络安全性

    六十四.WINOWS NT4.0下的网络安全性  热点网络 在网络多用户环境下,系统的安全性.权限设置非常重要,Windows NT 4.0提供了网络环境下的一个成功的安全保密系统.Windows NT从最初开发到目前使用广泛的Windows NT 4.0,其安全系统已日趋成熟.完备,但同时也使得系统的管理人员在构造网络环境.进行权限分配时,感到复杂.难以掌握.笔者查阅了众多的有关资料,又经过反复实践,在此作一简要的分析和介绍. Windows NT 4.0的网络安全性依赖于给用户或组授予的三种

随机推荐