angular项目如何配置国际化(i18n)?

本文介绍了如何在Angular项目中配置国际化(i18n),包括安装ngx-translate库,引入TranslateModule模块,注入TranslateService服务,创建并设置国际化json文件,以及如何在应用中使用i18n功能。
摘要由CSDN通过智能技术生成

1、下载ngx-translate的依赖库

//利用npm来安装ngx-translate依赖

npm install @ngx-translate/core --save

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

2、在项目根模块app.module.ts中引入引入TranslateModule模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Http } from '@angular/http';

//引入TranslateModule模块
import {
  TranslateModule,
  TranslateLoader,
  TranslateService
} from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';
import {HttpClient, HttpClientModule} from '@angular/common/http';

//配置i18n
export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(ht
  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现AngularJS 1.4.4的i18n国际化可以通过以下步骤: 1. 安装angular-translate库,在命令行中执行以下命令: ``` npm install angular-translate --save ``` 2. 在HTML中引入angular-translate库的js文件,例如: ```html <script src="bower_components/angular-translate/angular-translate.js"></script> ``` 3. 在AngularJS应用程序中注册'pascalprecht.translate'模块,例如: ```javascript var myApp = angular.module('myApp', ['pascalprecht.translate']); ``` 4. 配置语言文件,例如: ```javascript myApp.config(function($translateProvider) { $translateProvider.translations('en', { TITLE: 'Hello', FOO: 'This is a paragraph.', BUTTON_LANG_EN: 'english', BUTTON_LANG_DE: 'german' }); $translateProvider.translations('de', { TITLE: 'Hallo', FOO: 'Dies ist ein Absatz.', BUTTON_LANG_EN: 'englisch', BUTTON_LANG_DE: 'deutsch' }); $translateProvider.preferredLanguage('en'); }); ``` 5. 在HTML中使用AngularJS提供的指令来实现i18n,例如: ```html <div ng-controller="Ctrl"> <h1>{{ 'TITLE' | translate }}</h1> <p>{{ 'FOO' | translate }}</p> <button ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN"></button> <button ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE"></button> </div> ``` 6. 在控制器中定义changeLanguage方法,例如: ```javascript myApp.controller('Ctrl', function ($scope, $translate) { $scope.changeLanguage = function (key) { $translate.use(key); }; }); ``` 以上是基于AngularJS 1.4.4实现i18n国际化的大致步骤,具体实现会因应用程序的需求而有所不同。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值