会议室预约小程序_Angular4项目中添加i18n国际化插

摘要: Angular4新项目中加上i18n国际性化软件ngx-translate的流程详细说明 本文关键跟大伙儿详细介绍了有关Angular4新项目中加上i18n国际性化软件ngx-translate的流程,原文中详细介绍的十分详尽...

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, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 imports: [
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: (createTranslateHttpLoader),
 de凡科抠图: [Http]
 ]

结果如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { TranslateLoader, TranslateModule} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppComponent } from './ponent';
export function createTranslateHttpLoader(http: Http) {
 return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@NgModule({
 declarations: [
 AppComponent
 imports: [
 BrowserModule,
 HttpModule,
 TranslateModule.forRoot({
 loader: {
 provide: TranslateLoader,
 useFactory: (createTranslateHttpLoader),
 de凡科抠图: [Http]
 providers: [],
 bootstrap: [AppComponent]
export class AppModule { }

添加

import { TranslateService } from "@ngx-translate/core";
 constructor(public translateService: TranslateService) {
 ngOnInit() {
 // --- set i18n begin ---
 this.translateService.addLangs(["zh", "en"]);
 this.translateService.setDefaultLang("zh");
 const browserLang = this.translateService.getBrowserLang();
 this.translateService.use(browserLang.match(/zh|en/) browserLang : 'zh');
 // --- set i18n end ---
 }

结果如下:

import { Component } from '@angular/core';
import { TranslateService } from "@ngx-translate/core";
@Component({
 selector: 'app-root',
 ',
 styleUrls: ['./ponent.css']
export class AppComponent {
 title = 'app';
 constructor(public translateService: TranslateService) {
 ngOnInit() {
 // --- set i18n begin ---
 this.translateService.addLangs(["zh", "en"]);
 this.translateService.setDefaultLang("zh");
 const browserLang = this.translateService.getBrowserLang();
 this.translateService.use(browserLang.match(/zh|en/) browserLang : 'zh');
 // --- set i18n end ---
}

添加多语言文件

在 src/app/assets/ 下创建 i18n 文件夹,并在文件夹内创建 en.json 和 zh.json 文件

测试

<

添加代码:

 div 
 span test the i18n module: ngx-translate /span 
 h1 {{ 'hello' | translate }} /h1 
 /div 

在 en.json 和 zh.json 文件中添加配置

en.json

 "hello": "the word is hello"
}

zh.json

 "hello": "你好"
}

测试结果

在中文下

在英文下

示例代码

参考文章

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对凡科的支持。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888

技术支持:公众号小程序