Angular国际化方案:ngx-translate

2019-10-09 admin

效果图: 图片描述

步骤一. 安装依赖

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

@ngx-translate/core包含供翻译的核心程序:TranslateService和一些管道。 @ngx-translate/http-loader从网络服务器加载翻译文件

步骤二. 在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');
    }
}

首先,必须构造函数中注入TranslateService。下一步是设置应用程序的默认语言 translate.setDefaultLang(‘en’)。当然,也可以从用户设置中加载语言。现在,重新加载应用程序会在浏览器控制台中显示错误: 加载资源失败:服务器响应状态为404(未找到)http://localhost:4200/assets/i18n/en.json 这是因为http加载器现在尝试从服务器加载默认语言(en)。

步骤四. 在assets文件夹下新建i18n/en.json和zh.json

{
    "app": {
        "welcome": "Welcome",
        "themeSwitch": "Theme switch",
        "languageSwitch": "Language switch",
        "chinese": "Chinese"
    }
}

{
    "app": {
        "welcome": "欢迎",
        "themeSwitch": "主题切换",
        "languageSwitch": "语言切换",
        "chinese": "中文"
    }
}

步骤五. 在app.component.html中使用 translations

<span>{{ 'app.welcome' | translate }}</span>

步骤六. 在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')
  }

  language: string;

  ngOnInit() {
    this.setLanguage();
  }

  changeLanguage(lan: string) {
    const language = localStorage.getItem('lan');
    if (lan !== language) {
      this.translate.use(lan);
      this.saveLanguage(lan);
    }
  }

  saveLanguage(lan: string) {
    localStorage.setItem(`lan`, lan);
  }

  setLanguage() {
    this.language = localStorage.getItem('lan') || 'en'
    this.translate.use(this.language);
  }
}

[转载]原文链接:https://segmentfault.com/a/1190000020627077

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-76964.html

文章标题:Angular国际化方案:ngx-translate

相关文章
Vue 多系统切换实现方案(iframe嵌套的两三事)
前言 公司分好几个后台模块,统一使用vue+elementUi框架开发,每一个后台模块都是单独团队开发的。并且几个系统整体的风格、布局一样的,包括左侧边栏,上方的面包屑等 用户在使用的时候,可能要切换别的系统就要在浏览器里,新打开窗口,再输...
2018-06-04
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
使用AngularJS开发我们下一款Web应用的七个理由
在当下这个电子商务时代,每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告,全球网站总数已经超过8.76亿个,而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
2015-12-25
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的...
2017-03-25
在JavaScript的AngularJS库中进行单元测试的方法
开发者们都一致认为单元测试在开发项目中十分有好处。它们帮助你保证代码的质量,从而确保更稳定的研发,即使需要重构时也更有信心。 ** 测试驱动开发流程图** AngularJS的代码声称其较高的可测性确实是合理的。单单文档中列出端对端的测试...
2017-03-24
使用AngularJS实现可伸缩的页面切换的方法
AngularJS 1.2 通过引入基于纯CSS class的切换和动画,在一个单页面应用创建页面到页面的切换变得更加的容易。只需要使用一个ng-view,让我们来看一下,一个引入众多的不同切换的可伸缩方法,以及指定的每个页面如何切入和切出...
2017-03-24
整理AngularJS中的一些常用指令
AngularJS指令用于扩展HTML。这些都是先从ng- 前缀的特殊属性。我们将讨论以下指令: ng-app - 该指令启动一个AngularJS应用。 ng-init - 该指令初始化应用程序数据。 ng-model - 此指令定义的...
2017-03-24
angular.js 路由及页面传参示例
页面传参数方法:1、$rootScope。2、(url)/user/:name/:age。 页面转换方法:1、href=&quot;#/&quot; rel=“external nofollow” rel=“external nofollo...
2017-03-15
Angularjs实现搜索关键字高亮显示效果
需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1、每次执行搜索操作,需清空上一次结果 2、需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键...
2017-03-03
使用AngularJS和PHP的Laravel实现单页评论的方法
目前,Laravel和Angular均已经成为了Web发展世界里非常著名的工具。Laravel以给PHP社区引入的伟大内容著称,Angular以其惊人的前端工具及简单著称。组合这两大框架似乎是合乎逻辑的下一步。 在我们的使用环境下,我们将使...
2017-03-25
回到顶部