Angular 2 原生国际化支持（一）

原创

已于 2022-07-16 07:52:02 修改 · 2w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular #国际化

于 2017-02-26 01:37:22 首次发布

本文介绍了Angular 2的原生国际化支持，详细讲解了如何设置开发环境，安装必要的依赖，添加‘i18n’指令，从模板中抽取文本，添加不同语言支持，设置应用的默认语言，以及如何运行和调试项目。通过这些步骤，开发者可以轻松地为Angular 2应用实现多语言功能。

在Angular 1.x 的版本里面，没有原生的国际化支持，在前面的文章里面详细的分析了如何利用第三方库或者利用过滤器和指令实现国际化。而在Angular 2里面已经提供了原生的国际化支持。接下来我们一起看看如何实现Angular 2的国际化。

开发环境

node 6.9.2
npm 3.10.9
angular 2.4.8
compiler-cli 2.4.8
webpack 2.2.1
karma 1.5.0
typescript 2.1.5
gulp 3.9.1

安装

npm install

添加“i18n”指令

利用“i18n”属性标记需要翻译的内容，标签里面的内容将被抽取和翻译。

<h1 i18n="an introduction header for this sample">Hello i18n</h1>
<p i18n="a paragraph explaining what this sample is">This is a sample of internationalization in Angular2.</p>
<h2 i18n>Attribute sample</h2>
<input placeholder="Your name" [(ngModel)]="name" i18n-placeholder="a placeholder for field collecting the user's name">
<h2 i18n>Mult