angular做语言切换_angular多语言配置详解

angular的国际化方案,采用ngx-translate来实现。

安装模块:

npm install @ngx-translate/core --save

在根模块中导入:

// other module

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

@NgModule({

declarations: [

AppComponent,

],

imports: [

// other module

TranslateModule.forRoot(),

],

providers: [

],

bootstrap: [AppComponent]

})

export class AppModule {

}

我们希望可以在一个固定的文件里面配置对应的翻译文件,然后在每个用到的组件里面使用它,随意我们需要借助TranslateHttpLoader来加载翻译文件。首先安装TranslateHttpLoader:

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

翻译文件可以放在/assets/i18n/[lang].json中,[lang]代表使用的语言文件名称。然后我们可以在跟组件中添加配置对应的加载项:

// other module

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

// 自定义加载方法

export function HttpLoaderFactory(http: HttpClient) {

return new TranslateHttpLoader(http, './assets/i18n/', '.json?');

}

@NgModule({

declarations: [

AppComponent,

],

imports: [

// other module

TranslateModule.forRoot({

loader: {

provide: TranslateLoader,

useFactory: HttpLoaderFactory,

deps: [HttpClient],

}

}),

],

providers: [

],

bootstrap: [AppComponent]

})

export class AppModule {

}

然后我们在翻译文件中配置一个简单的示例:

// /asserts/il8n/en.json

{

"Hello": "hello, {{value}}",

"Introduce": {

"Name": "my name is {{name}}.",

"Today": "today is {{date}}, and now time is {{time}}"

}

}

应用的时候我们可以使用点语法,例如:Introduce.Name。

好了,定义好之后再来看如何使用。我们可以使用服务或管道或指令的方式来达到显示语言的效果。在使用之前,我们需要在应用中初始化TranslateService:

import { Component } from '@angular/core';

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.less']

})

export class AppComponent {

constructor(

public translate: TranslateService,

) {

this.translate.setDefaultLang('en');

this.translate.use('en');

}

}

我倾向于在跟组件的construct里面初始化TranslateService,因为一个系统的翻译是统一的,在开始应用的时候就需要设置好默认语言。这里使用translate.setDefaultLang('en')来设置默认语言为英文。然后使用translate.user('en')手动选择使用英文。在切换语言的时候,我们使用translate.user([lang])来设置启用哪个语言。

最后来使用翻译,有多种使用的方式。来看看。

使用方式

使用Service的方式

在运行的时候,会先发起个请求通过Http获取翻译文件,通过Observable的方式应用参数上去,然后获得翻译的内容。

// app.compent.ts

this.translate.get(

'Introduce.Name',

{name: 'Jarvis'}

).subscribe((res: string) => {

console.log('res', res); // res my name is Jarvis.

});

this.translate.get(

'Introduce.Today',

{

date: new Date().getDate(),

time: new Date().getTime()

},

).subscribe((res: string) => {

console.log('res', res); // res today is 22, and now time is 1534937370461

});

使用pipe的方式

{{'Hello' | translate: param

在js里定义参数param:

const param = {

value: 'world',

};

使用指令

管道的方式虽然方便,但参数还是需要在先定义好,这样子变量多的话也比较繁琐。使用指令的方式可以在程序中直接传参:

或者直接将元素的内容作为key:

Introduce.Today

应用html标签

可以在翻译文件中中定义简单的行级html标签

{

"Hello": "hello, {{value}}",

}

要渲染它们,在任何元素上只需要将innerHTML属性和管道一同使用即可。

常用方法

instant() 即时翻译

有些情况下,我们要在js里面动态的获取值和赋值,这时候没法使用模板语法,使用subscribe的方式又不利于代码的组织,这时候我们需要即时翻译来搞定了。方法定义:

instant(key: string|Array), insterpolateParams?: Object):string|Object

调用的时候传入key和对应的参数,即可返回当前key的翻译:

this.translate.instant('HELLO', {value: 'Jarvis'});

但是需要注意的是,这个方法是同步的,默认加载器是异步的。使用这个方法需要确保翻译文件已经加载完成了,如果不确定,就应该用get的方式。

参考:

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

时间: 2019-05-15

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245733.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cmd管道无法接收特定程序返回值_渗透不会反弹shell?来教你写一个cmd的shell

渗透不会反弹shell?来教你写一个cmd的shell包含的库:#include #include #include #include #include #pragma comment(lib, "Ws2_32.lib")#define DEFAULT_BUFLEN 1024winsock2和ws2tcpip两个库文件是用来初始化网络套接字的。windows用来初始…

有类似split的命令吗_5分钟学linux命令之split

情景介绍平时工作中,我习惯使用rz从本地上传文件到服务器,sz从服务器下载文件到本地,但对传输文件大小有限制,例如排查线上jvm的问题,需要生成了dump文件,可能有10G大,超过了限制,怎…

乐观锁的颗粒度_MySql数据库锁机制详解

概述数据库锁定机制简单的来说,就是数据库为了保证数据的一致性与完整性,而使各种共享资源在被并发访问时变得有序所设计的一种规则。对于任何一种数据库来说都需要有相应的锁机制,所以MySQL也不能例外。MySQL数据库根据锁锁定数据的颗粒度可…

云溪怎么导入dxf_dwg怎么转换成dxf文件?超详细图文教程分享

在CAD相关的工作中,我们经常遇到这种问题,需要把DWG格式的CAD图纸转换成DXF格式。那么,我们应该怎么做呢?接下来为你介绍这一个方法,非常方便快速哦。准备电脑风云CAD转换器具体步骤:在桌面上新建文件夹,将…

特斯拉是l3还是l2_比特斯拉还“高一级”,长安的“L3级自动驾驶”到底什么来头?...

3月5日,长安发布了旗下全新轿跑SUV——UNI-T,新车一经亮相,便凭借极具科幻的造型,以及越级的动力性能吸粉无数。而在大家意犹未尽之时,长安又在3月10日,通过UNI-T发布了“L3级自动驾驶”量产体验&#xff0…

unreal4怎么设置游戏模式_在Unreal4中如何连接自定义服务器

如何在Unreal4中连接自定义服务器?UE4 dedicated server是一个很好的游戏服务器,但是对于大厅和聊天服务器来说,我们要自行开发,通过UE4的socket组建很方便的和其他服务器建立连接。创建SocketFSocket* Socket ISocketSubsystem:…

mysql8 优化_MySQL 8.0 优化

优化效果(从大到小):硬件设备 -> MySQL数据库 -> Linux操作系统 -> 表设计—————————————————————————————————————-1硬件设备优化提升硬件设备,例如使用SSD高速磁盘,CPU等。—————————…

mysql的timestamp类型_MySQL数据库中的timestamp类型与时区

MySQL的timestamp类型时间范围between 1970-01-01 00:00:01 and 2038-01-19 03:14:07,超出这个范围则值记录为0000-00-00 00:00:00,该类型的一个重要特点就是保存的时间与时区密切相关,上述所说的时间范围是UTC(Universal Time Coordinated)标…

mysql处理时间_MYSQL时间处理  (转)

1.存储日期时间用now();2.存储日期用curdate()/current_date;3.存储时间用time();4.获取年份用year();5.获取月份用month();6.获取月份中的日期用day()或者dayofmonth();7.获取昨天就用date_sub(curdate(),interval 1day)/date_sub(current_date,interval 1 day);或者curdate()…

mysql导入数据比原来多_Oracle和MySQL的数据导入,差别为什么这么大

经常会有一些朋友咨询我一些数据库的问题,我注意到一个很有意思的现象,凡是数据导入的问题,基本上都是Oracle类的,MySQL类的问题脑子里想了下竟然一次都没有。我禁不住开始思考这个未曾注意的问题:为什么Oracle导入数据…

mysql5.7.17配置_mysql-5.7.17-winx64的安装配置

第一步:下载mysql-5.7.17-winx64解压版本:http://dev.mysql.com/downloads/mysql/第二步:解压到安装目录,如:C:\myprogram\mysql-5.7.17-winx64第三步:设置环境变量操作如下:1)右键单击我的电脑…

mysql 8核16g参数优化_问个 MySql 优化问题, 16G, 8 核服务器??

服务器配置:处理器:Xeon E3-1230 V2内存:16G DDR3 1600Mhz硬盘:1TB 企业级硬盘我现在的配置[mysqld]port xxxxsocket xxxdatadir xxxxdefault_storage_engine MyISAM#skip-external-locking#loose-skip-innodbkey_buffer_size …

mysql zero fill_mysql zerofill 的使用

mysql zerofill的使用:那这个int[M]中M是什么意义喃,在定义数值型数据类型的时候,可以在关键字括号内指定整数值(如:int(M),M的最大值为255)显示最大显示宽度,显示宽度M与数据所占用空间,数值的…

mysql第四项_mysql数据库的基本介绍与操作(第四篇-mysql索引篇)

索引概述:索引(也就是mysql中常说的键值key)是存储引擎用户快速找到记录的一种数据结构,这是索引的基本功能,索引对于良好的性能非常关键,尤其是当表中数据量越来越大的时候,索引对性能的影响就越重要,在数据量较小且负载较低时,不恰当的索引对性能的影响可能不明显,但当数据量…

openstack实例控制台显示响应时间过长_监控OpenStack的技巧

如果你以前曾在云平台上工作过,你一定熟悉这些系统的分布式和解耦性质。解耦的分布式系统依赖于微服务来执行特定的任务,每个微服务都会暴露自己的REST(表示状态转移)API。这些微服务通常以诸如RabbitMQ或QPID等消息中间件的形式通过轻量级消息层相互通信…

java8 创建list方式_Java 8 创建 Stream 的 10 种方式,我保证你受益无穷!

今天来分享下在 Java 8 中创建 Stream 的 10 种方式,我就整理了 10 种,其实还有更多,仅供大家参考学习下。 1、Stream.of 可变参数 Stream<String> stream1 = Stream.of("A", "B", "C"); System.out.println("stream1:" + st…

apache php mysql 整合_PHP+Apache+MySQL整合

整合PHPApacheMySQL非常郁闷&#xff0c;抗战到凌晨1&#xff1a;50分&#xff0c;终于胜利了。分享一下配置过程错误处理的历程&#xff0c;希望对后来人有所帮助。一、文件安装PHP下载&#xff1a;http://windows.php.net/downloads/qa/php-5.4.0alpha2-Win32-VC9-x86.zipMyS…

js map满足条件跳出循环_js.es5 map循环一大坑:循环遍历竟然出现逗号!

一、mapmap大法好作为当今程序界最好用的循环方法之一map, 在我的项目里基本替代了for循环map循环常用的一些方法/********* ES6 **********///一行代码可以省略returnarray.map( item > console.log(item))>array.map( item > {return console.log(item)})//多行代码…

logstash grok mysql_【Logstash系列】使用Redis并自定义Grok匹配

之前提到&#xff0c;用RabbitMQ作为消息队列。但是这个东西实在太过高精尖&#xff0c;不懂erlang不会调优的情况下&#xff0c;很容易挂掉——基本上我这里试验结果跑不了半小时日志传输就断了。所以改用简单易行的redis来干这个活。 之前的lib里&#xff0c;有inputs/redis.…

micropython按键控制流水灯_【micro:bit Micropython】The LED Display(1)控制像素点

使用DFrobot研发的micropython编程软件uPyCraft&#xff0c;下载固件(Firmware)和下载程序都非常方便。可以在DFrobot论坛中进行下载。uPyCraft软件运行界面官网中的micro:bit Micropython API介绍得非常详细&#xff0c;为开发人员提供了详细的文字说明和参照。micro:bit Micr…