基于ng-alain做国际化

  • 1.下载需要下载的包
  • 2.加载支持i18n模块
    • 2-1. 修改app.module.ts
    • 使用和修改默认语言
    • 在header.component.html中引用HeaderI18nComponent
    • 创建资源文件
  • 好了，文件完了。总结一下

1.下载需要下载的包

在package.json文件的dependencies下加入
“@ngx-translate/core”: “^13.0.0”,
“@ngx-translate/http-loader”: “^6.0.0”,
在终端输入npm install 下载这两个模块

2.加载支持i18n模块

2-1. 修改app.module.ts

加入加载i18n语言文件的代码：

import { ALAIN_I18N_TOKEN } from '@delon/theme';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { I18NService } from './core/i18n/i18n.service';// 加载i18n语言文件
export function I18nHttpLoaderFactory(http: HttpClient): TranslateHttpLoader {return new TranslateHttpLoader(http, `/assets/i18n/`, '.json');
}
const I18NSERVICE_MODULES = [TranslateModule.forRoot({loader: {provide: TranslateLoader,useFactory: I18nHttpLoaderFactory,deps: [HttpClient],},}),
];const I18NSERVICE_PROVIDES = [{ provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }];

在@NgModule修改providers

  providers: [...LANG_PROVIDES, ...INTERCEPTOR_PROVIDES, ...I18NSERVICE_PROVIDES, ...APPINIT_PROVIDES],

… 在src/app/i18n/下创建i18n.service.ts

import { Platform } from '@angular/cdk/platform';
import { registerLocaleData } from '@angular/common';
import ngEn from '@angular/common/locales/en';
import ngZh from '@angular/common/locales/zh';
import ngJaJp from '@angular/common/locales/ja';
import { Injectable } from '@angular/core';
import {AlainI18NService,DelonLocaleService,en_US as delonEnUS,SettingsService,zh_CN as delonZhCn,ja_JP as delonJaJp,
} from '@delon/theme';
import { TranslateService } from '@ngx-translate/core';
import { enUS as dfEn, zhCN as dfZhCn, ja as dfJaJp } from 'date-fns/locale';
import { NzSafeAny } from 'ng-zorro-antd/core/types';
import { en_US as zorroEnUS, NzI18nService, zh_CN as zorroZhCN, ja_JP as zorroJaJp } from 'ng-zorro-antd/i18n';
import { BehaviorSubject, Observable } from 'rxjs';
import { filter } from 'rxjs/operators';interface LangData {abbr: string;text: string;ng: NzSafeAny;zorro: NzSafeAny;date: NzSafeAny;delon: NzSafeAny;
}const DEFAULT = 'zh-CN';
const LANGS: { [key: string]: LangData } = {'zh-CN': {text: '简体中文',ng: ngZh,zorro: zorroZhCN,date: dfZhCn,delon: delonZhCn,abbr: '												


											

基于ng-alain做国际化相关推荐
	

    
								
  1. Angular 中后台前端解决方案 - Ng Alain 介绍
		
    Angular 中后台前端解决方案 - Ng Alain 介绍 参考文章: (1)Angular 中后台前端解决方案 - Ng Alain 介绍 (2)https://www.cnblogs.com/ ...
    
		
    2. 
						
  2. 基于HTML5平台做的“手机网页游戏”
		
    游戏在这个娱乐年代怎么可能少,微信有了游戏,这个平台也成了它的主要增值空间."愤怒的小鸟"."捕鱼达人"."水果忍者",一个个耳熟能详的手机 ...
    
		
    3. 
						
  3. 基于浏览器请求的国际化实现
		
    代码: loginForm.jsp <%@ page language="java" contentType="text/html; charset=UTF-8&q ...
    
		
    4. 
						
  4. 基于微信平台做视频直播时，如何裂变引流吸粉
		
    一个背景:微信也许是国内使用率最高,覆盖面最广的APP,在2017年微信公开课中,张小龙发布的<2016微信数据报告>显示,微信平均日活达到7.68亿.足以说微信平台的重要性,那么来说说, ...
    
		
    5. 
						
  5. 改：如何基于开源项目做二次开发
		
    改:如何基于开源项目做二次开发 ‌[保持纯洁,加以包装] 当我们发现开源项目有的地方不满足我们的需求的时候,自然会有一种去改改的冲动,但是怎么改是个大学问.一种方式是投入几个人从内到外全部改一遍,将其 ...
    
		
    6. 
						
  6. angular项目 集成ng zorro 和ng alain
		
    angular项目 集成 ng zorro和ng alain(mock 和acl权限)学习笔记 这段时间,比较忙,很久没有写博客了.作为后端开发人员,第一次接触angular,以下是个人的学习心得和D ...
    
		
    7. 
						
  7. 一个基于Flask框架做的仿QQ邮箱系统（收发邮件、贝叶斯模型训练、垃圾邮件过滤、个性化标签）
		
    一个基于Flask框架做的仿QQ邮箱系统(收发## 标题邮件.贝叶斯模型训练.垃圾邮件过滤.个性化标签) 1.贝叶斯邮件垃圾邮件分类 对上千封邮件进行贝叶斯模型分类训练,对基本邮件实现垃圾分类效果.  ...
    
		
    8. 
						
  8. 基于百度地图做热力图
		
    经过一天的学习,终于把基于百度地图做热力图搞出来了,现将流程分享如下: 1.收集整理数据 ** 一列地名,一列数据.如下图所示 2.将地名转换成经纬度 只有转换为经纬度,才能自动定位在地图上的位置,为 ...
    
		
    9. 
						
  9. angular蚂蚁_Angular 中后台前端解决方案  - Ng Alain 介绍
		
    背景 之前项目使用过vue.js+iview,习惯了后端开发的我,总觉得使用不习惯,之前分析易企秀前端代码,接触到了angular js,完备的相关功能,类似后端开发的体验,让人耳目一新,全新的ang ...
    
		
    10. 
		


					

最新文章
	

    
						
  1. 编译安装Ruby 1.9.3 安装CentOS
		
    2. 
						
  2. 【牛客 - 330C】Applese 走迷宫（bfs）
		
    3. 
						
  3. qt中创键树形控件QTreeWidget与QStackWidget相绑定
		
    4. 
						
  4. about the libiconv.2.dylib
		
    5. 
						
  5. java rsa enc 源码_RSA加解密源码 | 学步园
		
    6. 
						
  6. UVALive 3211 Now or Later （2-SAT）
		
    7. 
						
  7. 温室番茄一般病害的检测与严重程度评估系统（COCO Annotator 是一种基于 Web 的图像注释工具）
		
    8. 
						
  8. 在html或asp.net中使用FlexPaper
		
    9. 
						
  9. 最新HoloLens在windows10上的开发配置（1）
		
    10. 
						
  10. 配置淘宝Maven镜像仓库
		
    11. 
						
  11. 加拿大大学计算机世界排名,加拿大计算机专业大学排名
		
    12. 
						
  12. 【转】人生如梦游戏间，RPG游戏开源开发讲座(JAVA篇)[0]——月晕础润
		
    13. 
						
  13. 投入产出表matlab,投入产出分析投入产出表.doc
		
    14. 
						
  14. 国税服务器反回文件错误,电子税务局常见问题解答电子税务局异常转办（一）.pdf...
		
    15. 
						
  15. python word.documents.open报错_Python教程：[43]Word基本操作
		
    16. 
						
  16. nginx配置文件的基本参数略解
		
    17. 
						
  17. html链接外部样式表、链接网站图标
		
    18. 
						
  18. 本地——云服务器文件传输
		
    19. 
						
  19. 运用Java获取当前时间
		
    20. 
						
  20. 外贸必备通讯工具之一，AntTone 的介绍及使用教程
		
    21. 
		

	


热门文章
	

    
									
  1. python二元一次方程组用鸡兔同笼的思路来写编程_python二元一次方程组用鸡兔同笼的思路来写编程_《应用二元一次方程组——鸡兔同笼》......
			
    2. 
						
  2. Github入门教程（新版）
			
    3. 
						
  3. .NET Framework各个版本(3.0 - 3.5)
			
    4. 
						
  4. python学什么书_python自学用什么书
			
    5. 
						
  5. c#操作excel方式三:使用Microsoft.Office.Interop.Excel.dll读取Excel文件
			
    6. 
						
  6. 动画基础，3种动画方式
			
    7. 
						
  7. linux fastQC 操作命令,10 月 17 日 Linux Fastqc 软件安装
			
    8. 
						
  8. 客户案例 | 初窥元宇宙，Oasis让更多人找到第二人生
			
    9. 
						
  9. Ant Design Icon图标使用
			
    10. 
						
  10. Chrome 扩展程序 OneTab Techzero优化版 v1.0.0 发布
			
    11.