对于使用 Angular 框架的项目来说,我们可以利用以下第三方库,快速支持国际化: ngx-translate/core ngx-translate/http-loader ngx-translate-extract ngx-translate-demo 当前环境: Angular CLI: 6.1.4、Node: 9.11.0、OS: darwin x64 然后我们来安装上面的三个库: $ npm install @ngx-translate /core @ngx-translate/http-loader --save $ npm install @biesbjerg/ngx-translate-extract --save-dev ngx-translate /core"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { AppComponent } from /core"; import { TranslateHttpLoader } from "@ngx-translate/http-loader"; import { AppComponent } from
这个有点麻烦,但是我们依然可以使用依赖库,比如 ngx-translate 实现,喜大奔普~ 安装依赖 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 我们项目这里的对应版本号为: { "@ngx-translate/core": "^14.0.0", "@ngx-translate import { HttpClient } from '@angular/common/http'; import { TranslateModule, TranslateLoader } from '@ngx-translate /core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; // https://github.com/ngx-translate app.component.ts 中对翻译服务初始化: import { Component, OnInit } from '@angular/core'; import { TranslateService } from '@ngx-translate
模块下面时,之前在app.component下声明的各种服务,不会生效,需要在stones模块下重新去挂载,这样是非常麻烦的,因此,在实际项目中,会将那些公用的服务,例如提醒服务,国际化服务(本项目使用了ngx-translate 做国际化,ngx-translate在网上的教程比较详尽,不做赘述)。 from '@angular/common'; import {FormsModule} from '@angular/forms'; import {TranslateModule} from '@ngx-translate
RequestOptions} from '@angular/http'; import { TranslateService, TranslateModule, TranslateLoader } from '@ngx-translate /core'; import { TranslateHttpLoader } from '@ngx-translate/http-loader'; import { Router } from "@angular
[4.gif] 国际化 DevUI Admin 通过 @ngx-translate/core 实现国际化功能,国际化相关词条支持模块化管理,在初始化你的 Admin 项目是即可选择对应国际化配置。
最终参考了 ngx-formly 的设计方案,每个文本都支持传入响应式数据流,以 ngx-translate 为例,通过 translate.stream 监听语言变化即可。
ng-select ngx-formly ngx-progressbar ngx-translate ngx-toastr photoviewer
AspNetCore-Angular2-Universal – 跨平台 – 用于SEO,Bootstrap,i18n国际化(ngx-translate),Webpack,TypeScript,带Karma