feat: 翻译完了 i18n 部分

This commit is contained in:
Zhicheng Wang 2018-03-21 16:21:28 +08:00
parent 0e6fdf3db0
commit b54ce4847d
1 changed files with 280 additions and 44 deletions

View File

@ -6,6 +6,9 @@ Application internationalization is a many-faceted area of development, focused
applications available and user-friendly to a worldwide audience. This page describes Angular's
internationalization (i18n) tools, which can help you make your app available in multiple languages.
应用程序的国际化涉及到开发的很多方面,主要是如何让应用可以被全世界的用户使用而且用起来比较友好。
本页面讲的是 Angular 的*国际化**i18n*)工具,它可以帮助你使用多个语言发布应用。
See the <live-example downloadOnly name="i18n">i18n Example</live-example> for a simple example of
an AOT-compiled app, translated into French.
@ -15,32 +18,52 @@ an AOT-compiled app, translated into French.
## Angular and i18n
## Angular 与 i18n
Angular simplifies the following aspects of internationalization:
Angular 简化了国际化工作的下列几个方面:
* Displaying dates, number, percentages, and currencies in a local format.
用本地格式显示日期、数字、百分比以及货币。
* Translating text in component templates.
翻译组件模板中的文本。
* Handling plural forms of words.
处理单词的复数形式。
* Handling alternative text.
处理候选文本。
This document focuses on [**Angular CLI**](https://cli.angular.io/) projects, in which the Angular
CLI generates most of the boilerplate necessary to write your app in multiple languages.
本文档集中讲解 [**Angular CLI**](https://cli.angular.io/) 项目Angular CLI 为它生成了写多语言应用时必须的大部分样板代码。
{@a setting-up-locale}
## Setting up the locale of your app
## 为你的应用设置地区locale
A locale is an identifier (id) that refers to a set of user preferences that tend to be shared
within a region of the world, such as country. This document refers to a locale identifier as a
"locale" or "locale id".
地区是一个唯一性标识,它代表的是世界某个区域(比如国家)中共享的一组用户首选项。本文档中提到的“地区”就是指这个地区标识。
A Unicode locale identifier is composed of a Unicode language identifier and (optionally) the
character `-` followed by a locale extension. (For historical reasons the character `_` is supported
as an alternative to `-`.) For example, in the locale id `fr-CA` the `fr` refers to the French
language identifier, and the `CA` refers to the locale extension Canada.
Unicode 的地区标识是由 Unicode 语言标识、一个可选的 `-` 字符,后跟一个地区扩展项组合而成的。(由于历史的原因,还支持用 `_` 作为 `-` 的替代品。)比如,地区标识 `fr-CA` 中的 `fr` 代表法语的语言标识,而 `CA` 代表的是加拿大的语言扩展。
<div class="alert is-critical">
Angular follows the Unicode LDML convention that uses stable identifiers (Unicode locale identifiers)
@ -48,16 +71,19 @@ based on the norm [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt). It is ve
you follow this convention when you define your locale, because the Angular i18n tools use this
locale id to find the correct corresponding locale data.
**国际化**工作者通常将一个可翻译的文本叫作“信息”。
本章使用了“文本”和“信息”,它们可以互换,也可以组合“文本信息”。
Angular 遵循 Unicode 的 LDML 惯例,它使用基于 [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt) 标准的稳定标识Unicode 的地区标识)。当你要定义自己的地区时,遵循这个惯例非常重要,因为 Angular 的 i18n 工具会使用这种地区标识来查找相应的本地化数据。
</div>
By default, Angular uses the locale `en-US`, which is English as spoken in the United States of America.
默认情况下Angular 使用的地区标识是 `en-US`,它表示美国英语。
To set your app's locale to another value, use the CLI parameter `--locale` with the value
of the locale id that you want to use:
要把你的应用的地区改为其它值,可以使用 CLI 参数 `--locale` 来传入你要使用的地区标识:
<code-example language="sh" class="code-shell">
ng serve --aot --locale fr
@ -66,6 +92,8 @@ of the locale id that you want to use:
If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
如果要使用 JIT你就得在你的主模块中定义 `LOCALE_ID` 这个服务提供商:
<code-example path="i18n/doc-files/app.module.ts" title="src/app/app.module.ts" linenums="false">
</code-example>
@ -73,38 +101,54 @@ If you use JIT, you also need to define the `LOCALE_ID` provider in your main mo
For more information about Unicode locale identifiers, see the
[CLDR core spec](http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers).
要了解关于 Unicode 地区标识的更多信息,参见 [CLDR 核心规范](http://cldr.unicode.org/core-spec#Unicode_Language_and_Locale_Identifiers)。
For a complete list of locales supported by Angular, see
[the Angular repository](https://github.com/angular/angular/tree/master/packages/common/locales).
要查看 Angular 支持的地区总表,参见 [Angular 源码仓库](https://github.com/angular/angular/tree/master/packages/common/locales)。
The locale identifiers used by CLDR and Angular are based on [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt).
These specifications change over time; the following table maps previous identifiers to current ones at
time of writing:
| Locale name | Old locale id | New locale id |
CLDR 和 Angular 使用的地区标识基于 [BCP47](http://www.rfc-editor.org/rfc/bcp/bcp47.txt)。
这些规范可能会随时间而变化,下表中是本文编写时地区标识的新旧版本对照表:
| <p>Locale name</p><p>地区名称</p> | <p>Old locale id</p><p>旧 ID</p> | <p>New locale id</p><p>新 ID</p> |
|-------------------------------|-------------------|---------------|
| Indonesian | in | id |
| Hebrew | iw | he |
| Romanian Moldova | mo | ro-MD |
| Norwegian Bokmål | no, no-NO | nb |
| Serbian Latin | sh | sr-Latn |
| Filipino | tl | fil |
| Portuguese Brazil | pt-BR | pt |
| Chinese Simplified | zh-cn, zh-Hans-CN | zh-Hans |
| Chinese Traditional | zh-tw, zh-Hant-TW | zh-Hant |
| Chinese Traditional Hong Kong | zh-hk | zh-Hant-HK |
| <p>Indonesian</p><p>印度尼西亚</p> | in | id |
| <p>Hebrew</p><p>希伯来</p> | iw | he |
| <p>Romanian Moldova</p><p>罗马尼亚摩尔多瓦</p> | mo | ro-MD |
| <p>Norwegian Bokmål</p><p>挪威 Bokmål</p> | no, no-NO | nb |
| <p>Serbian Latin</p><p>塞尔维亚拉丁语</p> | sh | sr-Latn |
| <p>Filipino</p><p>菲律宾</p> | tl | fil |
| <p>Portuguese Brazil</p><p>葡萄牙巴西</p> | pt-BR | pt |
| <p>Chinese Simplified</p><p>中文简体</p> | zh-cn, zh-Hans-CN | zh-Hans |
| <p>Chinese Traditional</p><p>中文繁体</p> | zh-tw, zh-Hant-TW | zh-Hant |
| <p>Chinese Traditional Hong Kong</p><p>中文繁体(香港)</p> | zh-hk | zh-Hant-HK |
## i18n pipes
## i18n 管道
Angular pipes can help you with internationalization: the `DatePipe`, `CurrencyPipe`, `DecimalPipe`
and `PercentPipe` use locale data to format data based on the `LOCALE_ID`.
Angular 的管道可以帮助你进行国际化:`DatePipe`、`CurrencyPipe`、`DecimalPipe` 和 `PercentPipe` 都使用本地化数据来根据 `LOCALE_ID` 格式化数据。
By default, Angular only contains locale data for `en-US`. If you set the value of
`LOCALE_ID` to another locale, you must import locale data for that new locale.
The CLI imports the locale data for you when you use the parameter `--locale` with `ng serve` and
`ng build`.
默认情况下Angular 只包含 `en-US` 的本地化数据。如果你要把 `LOCALE_ID` 的值设置为其它地区,就必须为那个新地区导入本地化数据。
当你使用 `ng serve``ng build``--locale` 参数时CLI 会自动帮你导入相应的本地化数据。
If you want to import locale data for other languages, you can do it manually:
如果还要为其它语言导入本地化数据,你可以手工完成它:
<code-example path="i18n/doc-files/app.locale_data.ts" region="import-locale" title="src/app/app.module.ts" linenums="false">
</code-example>
@ -117,10 +161,18 @@ specify a custom locale id. For example, Angular's locale data defines the local
"fr". You can use the second parameter to associate the imported French locale data with the custom
locale id "fr-FR" instead of "fr".
第一个参数是一个包含从 `@angular/common/locales` 中导入的本地化数据的对象。
默认情况下,导入 Angular 自带的本地化数据时会使用数据中自带的一个地区标识进行注册。
如果你要使用其它地区标识来注册这个导入的本地化数据,可以在第二个参数中指定一个自定义的地区标识。
比如Angular 为法语定义的地区标识是 “fr”你可以通过第二个参数为这些导入的法语本地化数据指定一个自定义的地区标识 “fr-FR”。
The files in `@angular/common/locales` contain most of the locale data that you
need, but some advanced formatting options might only be available in the extra dataset that you can
import from `@angular/common/locales/extra`. An error message informs you when this is the case.
`@angular/common/locales` 中的文件包含你需要的大多数本地化数据,
不过有些高级的格式选项只存在于从 `@angular/common/locales/extra` 中导入的扩展数据集中。遇到这种情况,你就会收到一条错误信息。
<code-example path="i18n/doc-files/app.locale_data_extra.ts" region="import-locale-extra" title="src/app/app.module.ts" linenums="false">
</code-example>
@ -130,50 +182,73 @@ import from `@angular/common/locales/extra`. An error message informs you when t
All locale data used by Angular are extracted from the Unicode Consortium's
<a href="http://cldr.unicode.org/" title="CLDR">Common Locale Data Repository (CLDR)</a>.
Angular 中使用的所有本地化数据都是从 Unicode 联盟的<a href="http://cldr.unicode.org/" title="CLDR">常用本地化数据仓库 (CLDR)</a> 中提取的。
</div>
## Template translations
## 模板翻译
<div class="l-sub-section">
This document refers to a unit of translatable text as "text," a "message", or a
"text message."
本文档中会把翻译文本的最小单元称为“文本”、“消息”或“文本消息”。
</div>
The i18n template translation process has four phases:
i18n 模板的翻译过程分为四个阶段
1. Mark static text messages in your component templates for translation.
在组件模板中标记需要翻译的静态文本信息。
2. An Angular i18n tool extracts the marked text into an industry standard translation source file.
Angular的 i18n 工具将标记的信息提取到一个行业标准的翻译源文件。
3. A translator edits that file, translating the extracted text into the target language,
and returns the file to you.
翻译人员编辑该文件,翻译提取出来的文本信息到目标语言,并将该文件还给你。
4. The Angular compiler imports the completed translation files,
replaces the original messages with translated text, and generates a new version of the app
in the target language.
Angular编译器导入完成翻译的文件使用翻译的文本替换原始信息并生成新的目标语言版本的应用程序。
You need to build and deploy a separate version of the app for each supported language.
你可以为每种支持的语言构建和部署单独的应用程序版本。
{@a i18n-attribute}
### Mark text with the i18n attribute
### 使用 `i18n` 属性标记文本
The Angular `i18n` attribute marks translatable content. Place it on every element tag whose fixed
text is to be translated.
Angular的`i18n`属性是可翻译内容的标记。
将它放到每个固定文本需要翻译的元素标签中。
In the example below, an `<h1>` tag displays a simple English language greeting, "Hello i18n!"
在下面的例子中,`<h1>`标签显示了一句简单的英文问候语“Hello i18n!”
<code-example path="i18n/doc-files/app.component.html" region="greeting" title="src/app/app.component.html" linenums="false">
</code-example>
To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag.
添加 `i18n` 属性到该标签上,把它标记为需要翻译的文本
要想把它标记为需要翻译的文本,就给 `<h1>` 标签添加 `i18n` 属性。
<code-example path="i18n/doc-files/app.component.html" region="i18n-attribute" title="src/app/app.component.html" linenums="false">
@ -184,17 +259,26 @@ To mark the greeting for translation, add the `i18n` attribute to the `<h1>` tag
`i18n` is a custom attribute, recognized by Angular tools and compilers.
After translation, the compiler removes it. It is not an Angular directive.
`i18n` 是一个自定义属性,会被 Angular 工具和编译器识别。
翻译之后,编译器就会移除它。它不是 Angular 指令。
</div>
{@a help-translator}
### Help the translator with a description and meaning
### 用描述和意图来帮助翻译人员
To translate a text message accurately, the translator may need additional information or context.
要想翻译的更准确,翻译人员可能需要待翻译文本的额外信息或场景说明。
You can add a description of the text message as the value of the `i18n` attribute, as shown in the
example below:
你可以用 `i18n` 属性的值来添加这些文本信息的描述,例子如下:
<code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-desc" title="src/app/app.component.html" linenums="false">
</code-example>
@ -202,12 +286,12 @@ example below:
The translator may also need to know the meaning or intent of the text message within this particular
app context.
为了给出正确的翻译,翻译者需要知道你这段文本在特定情境下的 *真实意图*
为了给出正确的翻译,翻译者需要知道你这段文本在特定情境下的*含义*或*真实意图*
You add context by beginning the `i18n` attribute value with the _meaning_ and
separating it from the _description_ with the `|` character: `<meaning>|<description>`
在描述的前面,我们为指定的字符串添加一些上下文含义,用 `|` 将其与描述文字隔开(`<意图>|<描述>`)。
在描述的前面,你可以用 `i18n` 开头的属性值来为指定的字符串添加一些上下文含义,用 `|` 将其与描述文字隔开(`<意图>|<描述>`)。
<code-example path="i18n/doc-files/app.component.html" region="i18n-attribute-meaning" title="src/app/app.component.html" linenums="false">
@ -216,15 +300,16 @@ separating it from the _description_ with the `|` character: `<meaning>|<descrip
All occurrences of a text message that have the same meaning will have the same translation.
A text message that is associated with different meanings can have different translations.
如果所有地方出现的文本具有**相同**含义时,它们应该有**相同**的翻译,
但是如果在某些地方它具有**不同含义**,那么它应该有不同的翻译。
The Angular extraction tool preserves both the meaning and the description in the translation
source file to facilitate contextually-specific translations, but only the combination of meaning
and text message are used to generate the specific id of a translation. If you have two
similar text messages with different meanings, they are extracted separately. If you have two similar
text messages with different descriptions (not different meanings), then they are extracted only once.
如果所有地方出现的文本具有**相同**含义时,它们应该有**相同**的翻译,
但是如果在某些地方它具有**不同含义**,那么它应该有不同的翻译。
Angular 的提取工具在翻译源文件中保留**含义**和**描述**,以支持符合特定上下文的翻译。
Angular 的提取工具会在翻译源文件中保留**含义**和**描述**,以支持符合特定上下文的翻译。但它只会使用含义和文本消息的组合来为待翻译文本生成明确的 id。如果你有两个相同的文本消息但是含义不同它们就会被分别提取。如果你有两个相同的文本消息但是描述不同但含义相同它们就只会提取一次。
{@a custom-id}
@ -244,12 +329,15 @@ Angular 的 `i18n` 提取工具会为模板中每个带有 `i18n` 属性的元
When you change the translatable text, the extractor tool generates a new id for that translation unit.
You must then update the translation file with the new id.
我们修改这段可翻译的文字时,提取工具会为那个翻译单元生成一个新的 `id`
我们就要使用这个新的 id 来修改这个翻译文件。
修改这段可翻译的文字时,提取工具会为那个翻译单元生成一个新的 `id`
就要使用这个新的 id 来修改这个翻译文件。
Alternatively, you can specify a custom id in the `i18n` attribute by using the prefix `@@`.
The example below defines the custom id `introductionHeader`:
另一种方案是,你可以使用 `@@` 前缀在 `i18n` 属性中指定一个自定义的 id。
下面这个例子就定义了一个自定义 id `introductionHeader`
<code-example path='i18n/doc-files/app.component.html' region='i18n-attribute-solo-id' title='app/app.component.html' linenums="false">
</code-example>
@ -257,7 +345,7 @@ The example below defines the custom id `introductionHeader`:
When you specify a custom id, the extractor tool and compiler generate a translation unit with that
custom id.
现在,提取工具和编译器就会用*你的自定义 id` 生成一个翻译单元,而不会再改变它。
一旦你指定了自定义 id,提取工具和编译器就会用*你的自定义 id` 生成一个翻译单元,而不会再改变它。
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="custom-id" linenums="false">
@ -266,19 +354,28 @@ custom id.
The custom id is persistent. The extractor tool does not change it when the translatable text changes.
Therefore, you do not need to update the translation. This approach makes maintenance easier.
自定义 id 是永久性的,翻译工具待翻译文本发生变化时不会修改它。
因此,你不必修改翻译结果。这种方式可以让维护变得更简单。
#### Use a custom id with a description
#### 在描述中使用自定义 id
You can use a custom id in combination with a description by including both in the value of the
`i18n` attribute. In the example below, the `i18n` attribute value includes a description, followed
by the custom `id`:
你可以在 `i18n` 属性的值中使用自定义 id 与描述信息的组合。
下面的例子中,`i18n` 的属性中中就包含了一条跟在自定义 `id` 后面的描述信息:
<code-example path='i18n/doc-files/app.component.html' region='i18n-attribute-id' title='app/app.component.html' linenums="false">
</code-example>
You also can add a meaning, as shown in this example:
下面这个例子带有*含义*和*描述*,最后是 `id`
你还可以添加含义,例子如下
<code-example path='i18n/doc-files/app.component.html' region='i18n-attribute-meaning-and-id' title='app/app.component.html' linenums="false">
@ -286,13 +383,17 @@ You also can add a meaning, as shown in this example:
#### Define unique custom ids
#### 定义唯一的自定义 ID
Be sure to define custom ids that are unique. If you use the same id for two different text messages,
only the first one is extracted, and its translation is used in place of both original text messages.
为了确保定义出*唯一*的自定义 id。如果我们对两个*不同的*文本块使用了同一个 id那么就只有一个会被提取出来然后其翻译结果会被用于全部文本块
要确保自定义 id 是唯一的。如果我们对两个*不同的*文本块使用了同一个 id那么就只有一个会被提取出来然后其翻译结果会被用于全部原始文本消息
In the example below the custom id `myId` is used for two different messages:
在下面这个例子中,自定义的 id `myId` 就被用在了两个不同的消息上:
```html
<h3 i18n="@@myId">Hello</h3>
@ -305,6 +406,8 @@ In the example below the custom id `myId` is used for two different messages:
Consider this translation to French:
考虑下列法文翻译:
```xml
<trans-unit id="myId" datatype="html">
@ -317,6 +420,8 @@ Consider this translation to French:
Because the custom id is the same, both of the elements in the resulting translation contain
the same text, `Bonjour`:
由于自定义 id 都是一样的,所以翻译结果中所有的元素都包含同样的文本 `Bonjour`
```html
<h3>Bonjour</h3>
@ -354,8 +459,8 @@ The `<ng-container>` is transformed into an html comment:
You also can translate attributes.
For example, assume that your template has an image with a `title` attribute:
我们还可以翻译属性。
比如,假设我们的模板具有一个带 `title` 属性的图片:
还可以翻译属性。
比如,假设你的模板中有一个带 `title` 属性的图片:
<code-example path="i18n/doc-files/app.component.html" region="i18n-title" title="src/app/app.component.html" linenums="false">
@ -369,22 +474,27 @@ To mark an attribute for translation, add an attribute in the form of `i18n-x`,
where `x` is the name of the attribute to translate. The following example shows how to mark the
`title` attribute for translation by adding the `i18n-title` attribute on the `img` tag:
要把一个属性标记为需要翻译的,就添加一个形如 `i18n-x` 的属性,其中的 `x` 是要翻译的属性的名字。
下面的例子中演示了如何通过给 `img` 标签添加 `i18n-title` 属性来把 `title` 属性标记为待翻译的。
<code-example path="i18n/src/app/app.component.html" region="i18n-title-translate" title="src/app/app.component.html" linenums="false">
</code-example>
This technique works for any attribute of any element.
这个技巧适用于任何元素上的任何属性。
You also can assign a meaning, description, and id with the `i18n-x="<meaning>|<description>@@<id>"`
syntax.
我们也同样可以使用 `i18n-x="<meaning>|<description>@@<id>"` 语法来指定一个含义和描述。
也同样可以使用 `i18n-x="<meaning>|<description>@@<id>"` 语法来指定一个含义和描述。
{@a plural-ICU}
## Translate singular and plural
## 处理单数与复数
## 翻译单数与复数
Different languages have different pluralization rules.
@ -395,13 +505,15 @@ In English, depending upon the number of minutes, you could display "just now",
or "x minutes ago" (with x being the actual number).
Other languages might express the cardinality differently.
假设应用中需要谈论一些狼
在英语中,根据狼的数量,可能要显示为"no wolves"、"one wolf"、"two wolves"或"a wolf pack"
而在其它语言中则可能会有不同的**基数**规则。
假设你要说某些东西“updated x minutes ago在 x 分钟前修改了)”
在英语中,根据分钟数,可能要显示为 "just now"、"one minute ago" 或 "x minutes ago"(这里的 x 是实际的数量)
而在其它语言中则可能会有不同的基数规则。
The example below shows how to use a `plural` ICU expression to display one of those three options
based on when the update occurred:
下面这个例子示范了如何使用 ICU 表达式 `plural` 来根据这次修改发生的时间显示这三个选项之一:
<code-example path="i18n/src/app/app.component.html" region="i18n-plural" title="src/app/app.component.html" linenums="false">
</code-example>
@ -409,7 +521,7 @@ based on when the update occurred:
* The first parameter is the key. It is bound to the component property (`minutes`), which determines
the number of minutes.
第一个参数是 key。它绑定到了组件中表示狼的数量的 `wolves` 属性。
第一个参数是 key。它绑定到了组件中表示分钟数的 `minutes` 属性。
* The second parameter identifies this as a `plural` translation type.
@ -426,6 +538,9 @@ the number of minutes.
as specified in the
<a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">CLDR pluralization rules</a>.
这种语法遵守 <a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">CLDR 复数规则</a> 中指定的
<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU 消息格式</a>
</div>
Pluralization categories include (depending on the language):
@ -462,7 +577,7 @@ Pluralization categories include (depending on the language):
After the pluralization category, put the default English text in braces (`{}`).
把默认的*英语*翻译结果放在复数类别之后的括号(`{}`)中。
复数类别之后的括号(`{}`)中是默认的*英语*文本
In the example above, the three options are specified according to that pluralization pattern. For
talking about about zero minutes, you use `=0 {just now}`. For one minute, you use `=1 {one minute}`.
@ -470,10 +585,15 @@ Any unmatched cardinality uses `other {{{minutes}} minutes ago}`. You could choo
for two, three, or any other number if the pluralization rules were different. For the example of
"minute", only these three patterns are necessary in English.
在上面的例子中,这三个选项都是根据复数模式来指定的。要说零分钟,就用 `=0 {just now}`。一分钟就用 `=1 {one minute}`
无法匹配的数量就用 `other {{{minutes}} minutes ago}`。如果复数规则与此不同,你还可以为两个、三个火任意数量添加更多的模式。对于这个 “minute” 的例子,英语中只要这三种模式就够了。
<div class="l-sub-section">
You can use interpolations and html markup inside of your translations.
你可以在翻译结果中使用插值表达式和 HTML 标记。
</div>
{@a select-ICU}
@ -485,10 +605,14 @@ for two, three, or any other number if the pluralization rules were different. F
If your template needs to display different text messages depending on the value of a variable, you
need to translate all of those alternative text messages.
如果你的模板中需要根据某个变量的值显示出不同的文本消息,你还需要对所有这些候选文本进行翻译。
You can handle this with a `select` ICU expression. It is similar to the `plural` ICU expressions
except that you choose among alternative translations based on a string value instead of a number,
and you define those string values.
你可以使用 ICU 表达式 `select` 来翻译这些。它与 ICU 表达式 `plural` 类似,只是你要根据一个字符串值而不是数字来选择这些候选翻译文本,而这些字符串值是你自己定义的。
The following format message in the component template binds to the component's `gender` property,
which outputs one of the following string values: "m", "f" or "o".
The message maps those values to the appropriate translations:
@ -523,11 +647,11 @@ You can also nest different ICU expressions together, as shown in this example:
Use the `ng xi18n` command provided by the CLI to extract the text messages marked with `i18n` into
a translation source file.
使用 `ng-xi18n` 提取工具来将带 `i18n` 标记的文本提取到一个翻译源文件中。
使用 CLI 提供的 `ng xi18n` 命令来将带 `i18n` 标记的文本消息提取到一个翻译源文件中。
Open a terminal window at the root of the app project and enter the `ng xi18n` command:
在应用的项目根目录打开一个终端窗口,并输入 `ng-xi18n` 命令:
在应用的项目根目录打开一个终端窗口,并输入 `ng xi18n` 命令:
<code-example language="sh" class="code-shell">
@ -539,17 +663,26 @@ By default, the tool generates a translation file named `messages.xlf` in the
<a href="https://en.wikipedia.org/wiki/XLIFF">XML Localization Interchange File Format
(XLIFF, version 1.2)</a>.
本工具默认会生成一个名叫 `messages.xlf` 的翻译文件,格式为<a href="https://en.wikipedia.org/wiki/XLIFF" target="_blank">XML本土化互换文件格式(XLIFF, version 1.2)</a>
<div class="l-sub-section">
If you don't use the CLI, you have two options:
如果你不使用 CLI那么你有两个选择
* You can use the `ng-xi18n` tool directly from the `@angular/compiler-cli` package.
For more information, see [i18n in the CLI documentation](https://github.com/angular/angular-cli/wiki/xi18n).
你可以直接使用来自 `@angular/compiler-cli` 包中的 `ng-xi18n` 工具。更多信息,参见 [CLI 文档中的 i18n 部分](https://github.com/angular/angular-cli/wiki/xi18n)。
* You can use the CLI Webpack plugin `AngularCompilerPlugin` from the `@ngtools/webpack` package.
Set the parameters `i18nOutFile` and `i18nOutFormat` to trigger the extraction.
For more information, see the [Angular Ahead-of-Time Webpack Plugin documentation](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack).
你可以使用 CLI 中来自 `@ngtools/webpack` 包中的 Webpack 插件。设置其 `i18nOutFile``i18nOutFormat` 参数进行触发。
更多信息,参见 [Angular AOT Webpack 插件文档](https://github.com/angular/angular-cli/tree/master/packages/%40ngtools/webpack)。
</div>
{@a other-formats}
@ -560,17 +693,23 @@ For more information, see the [Angular Ahead-of-Time Webpack Plugin documentatio
Angular i18n tooling supports three translation formats:
Angular 的 i18n 工具支持三种翻译格式:
* XLIFF 1.2 (default)
XLIFF 1.2 (默认)
* XLIFF 2
* <a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML Message
Bundle (XMB)</a>
<a href="http://cldr.unicode.org/development/development-process/design-proposals/xmb" >XML 消息包 (XMB)</a>
You can specify the translation format explicitly with the `--i18nFormat` flag as illustrated in
these example commands:
我们可以使用 `--i18nFormat` 来明确指定想用的格式,范例如下:
可以使用 `--i18nFormat` 来明确指定想用的格式,范例如下:
<code-example language="sh" class="code-shell">
@ -582,11 +721,15 @@ ng xi18n --i18nFormat=xmb
The sample in this guide uses the default XLIFF 1.2 format.
本章的范例使用默认的 XLIFF 1.2 格式。
<div class="l-sub-section">
XLIFF files have the extension .xlf. The XMB format generates .xmb source files but uses
.xtb (XML Translation Bundle: XTB) translation files.
XLIFF 文件带有 .xlf 扩展名。XMB 格式会生成 .xmb 格式的源文件,但使用 .xtbXML 翻译包)格式的翻译文件。
</div>
{@a ng-xi18n-options}
@ -598,8 +741,7 @@ The sample in this guide uses the default XLIFF 1.2 format.
You can specify the output path used by the CLI to extract your translation source file with
the parameter `--outputPath`:
我们还可能需要指定其它选项。
比如,如果 TypeScript 的配置文件 `tsconfig.json` 位于其它地方而不是根目录,我们就要通过 `-p` 选项来明确指出它的路径。
你还可以使用 `--outputPath` 参数在 CLI 提取翻译源文件时指定输出路径:
<code-example language="sh" class="code-shell">
@ -610,6 +752,8 @@ the parameter `--outputPath`:
You can change the name of the translation source file that is generated by the extraction tool with
the parameter `--outFile`:
你还可以使用 `--outFile` 参数来为提取工具生成的翻译源文件改名:
<code-example language="sh" class="code-shell">
ng xi18n --outFile source.xlf
@ -618,6 +762,8 @@ the parameter `--outFile`:
You can specify the base locale of your app with the parameter `--locale`:
你还可以使用 `--locale` 参数来指定应用的基本地区:
<code-example language="sh" class="code-shell">
ng xi18n --locale fr
@ -627,6 +773,8 @@ You can specify the base locale of your app with the parameter `--locale`:
The extraction tool uses the locale to add the app locale information into your translation source
file. This information is not used by Angular, but external translation tools may need it.
该提取工具会用这个地区标识把本地化信息添加到你的翻译源文件中。这个信息对 Angular 来说没用,不过外部翻译工具可能会需要它。
{@a translate}
## Translate text messages
@ -636,7 +784,7 @@ file. This information is not used by Angular, but external translation tools ma
The `ng xi18n` command generates a translation source file named `messages.xlf` in the project `src`
folder.
`ng xi18n` 命令在项目根目录生成一个名为 `messages.xlf` 的翻译源文件。
`ng xi18n` 命令在项目根目录生成一个名为 `messages.xlf` 的翻译源文件。
The next step is to translate this source file into the specific language
translation files. The example in this guide creates a French translation file.
@ -658,7 +806,7 @@ for the project structure to reflect the entire internationalization effort.
One approach is to dedicate a folder to localization and store related assets, such as
internationalization files, there.
其中一种方法是为本土化和相关资源(比如国际化文件)创建一个专门的目录。
方法之一是为本土化和相关资源(比如国际化文件)创建一个专门的目录。
<div class="l-sub-section">
@ -673,21 +821,37 @@ internationalization files, there.
This guide follows that approach. It has a `locale` folder under `src/`.
Assets within that folder have a filename extension that matches their associated locale.
本指南遵循了这种方式。在`src/`目录下,有一个专门的`locale`目录,该目录中的文件都带一个与相关地区匹配的扩展名。
### Create the translation files
### 创建翻译文件
For each translation source file, there must be at least one language translation file for the
resulting translation.
对每个翻译文件来说,都必须至少有一个语言的翻译文件作为翻译结果。
For this example:
对于这个例子:
1. Make a copy of the `messages.xlf` file.
复制一份 `messages.xlf` 文件。
2. Put the copy in the `locale` folder.
把这个副本放进 `locale` 目录下。
3. Rename the copy to `messages.fr.xlf` for the French language translation.
把这个副本改名为 `messages.fr.xlf` 以作为法语翻译结果。
If you were translating to other languages, you would repeat these steps for each target language.
如果你要翻译为其他语言,那就为每一个目标语种重复上述步骤。
{@a translate-text-nodes}
### Translate text nodes
@ -697,7 +861,7 @@ If you were translating to other languages, you would repeat these steps for eac
In a large translation project, you would send the `messages.fr.xlf` file to a French translator who
would enter the translations using an XLIFF file editor.
在现实世界中,`messages.fr.xlf` 文件会被发给法语翻译,他们使用<a href="https://en.wikipedia.org/wiki/XLIFF#Editors" target="_blank">这些 XLIFF 文件编辑器</a>中的一种来翻译它。
在现实世界中,`messages.fr.xlf` 文件会被发给法语翻译,他们会使用某种 XLIFF 文件编辑器来翻译它。
This sample file is easy to translate without a special editor or knowledge of French.
@ -705,24 +869,35 @@ This sample file is easy to translate without a special editor or knowledge of F
1. Open `messages.fr.xlf` and find the first `<trans-unit>` section:
打开 `messages.fr.xlf` 并找到第一个 `<trans-unit>` 区:
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello-before" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false"></code-example>
> This XML element represents the translation of the `<h1>` greeting tag that you marked with the
`i18n` attribute earlier in this guide.
> 这个 XML 元素表示前面你加过 `i18n` 属性的那个打招呼用的 `<h1>` 标签。
> Note that the translation unit `id=introductionHeader` is derived from the
[custom `id`](#custom-id "Set a custom id") that you set earlier, but
without the `@@` prefix required in the source HTML.
> 注意这个 `id=introductionHeader` 的翻译单元是来自你以前设置过的[自定义 `id`](#custom-id "Set a custom id")的。但是并没有源 HTML 所需的 `@@` 前缀。
2. Duplicate the `<source/>` tag, rename it `target`, and then replace its content with the French
greeting. If you were working with a more complex translation, you could use the the information
and context provided by the source, description, and meaning elements to guide your selection of
the appropriate French translation.
复制 `<source/>` 标记,把它改名为 `target`,并把它的内容改为法语版的 “greeting”。
如果你要做的是更复杂的翻译,可能会使用由源文本、描述信息和含义等提供的信息和上下文来给出更恰当的法语翻译。
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-hello" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;, after translation)" linenums="false"></code-example>
3. Translate the other text nodes the same way:
用同样的方式翻译其它文本节点:
> <code-example path="i18n/doc-files/messages.fr.xlf.html" region="translated-other-nodes" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false"></code-example>
<div class="alert is-important">
@ -732,19 +907,31 @@ This sample file is easy to translate without a special editor or knowledge of F
If you change either the text or the meaning, then the `id` changes.
For more information, see the **[translation file maintenance discussion](#custom-id)**.
**Angular 的 i18n 工具会为这些翻译单元生成一些 id不要修改它们。**
每个 `id` 都是根据模板文本的内容及其含义来生成的。
无论你修改了文本还是含义,它们的 `id` 都会改变。
要了解更多信息,参见 **[关于翻译文件可维护性的讨论](#custom-id)**。
</div>
{@a translate-plural-select}
## Translate plural and select expressions
## 翻译复数plural和选择select表达式
_Plural_ and _select_ ICU expressions are extracted separately, so they require special attention
when preparing for translation.
*复数*和*选择*的 ICU 表达式都是分别提取的,所以在准备翻译时,它们需要格外注意。
Look for these expressions in relation to other translation units that you recognize from
elsewhere in the source template. In this example, you know the translation unit for the `select`
must be just below the translation unit for the logo.
你要从原始模板中其它地方识别出来的翻译单元来找到这些表达式之间的联系。
比如在这个例子中,你知道 `select` 一定会出现在 logo 的翻译单元的紧下方。
{@a translate-plural}
### Translate _plural_
@ -762,6 +949,8 @@ To translate a `plural`, translate its ICU format match values:
You can add or remove plural cases, with each language having its own cardinality. (See
[CLDR plural rules](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html).)
你可以添加或删除复数的情况,每种语言都有自己的基数规则。(参见 [CLDR 复数规则](http://www.unicode.org/cldr/charts/latest/supplemental/language_plural_rules.html))。
{@a translate-select}
### Translate _select_
@ -770,6 +959,8 @@ You can add or remove plural cases, with each language having its own cardinalit
Below is the content of our example `select` ICU expression in the component template:
下面是组件模板中的 ICU 表达式 `select` 的例子:
<code-example path="i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
</code-example>
@ -786,7 +977,8 @@ the placeholder, the ICU expression will not be present in your translated app.
第一个单元包含 `select` 之外的文本。
这里的 `select` 是一个占位符 `<x id="ICU">`,用来表示 `select` 中的消息。
翻译这段文本,并把占位符放在那里。
翻译这段文本,如果需要就把占位符放在那里,但不要删除它。
如果删除了占位符ICU 表达式就不会出现在翻译后的应用中。
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-1" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
@ -795,7 +987,7 @@ the placeholder, the ICU expression will not be present in your translated app.
The second translation unit, immediately below the first one, contains the `select` message.
Translate that as well.
第一个翻译单元的紧下方就是第二个翻译单元,包含 `select` 中的消息。翻译它。
第一个翻译单元的紧下方就是第二个翻译单元,包含 `select` 中的消息。照样翻译它。
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-select-2" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
@ -819,6 +1011,7 @@ A nested expression is similar to the previous examples. As in the previous exam
two translation units. The first one contains the text outside of the nested expression:
嵌套的表达式和前一节没有什么不同。就像上一个例子中那样,我们有*两个*翻译单元。
第一个包含嵌套表达式之外的文本:
<code-example path="i18n/doc-files/messages.fr.xlf.html" region="translate-nested-1" title="src/locale/messages.fr.xlf (&lt;trans-unit&gt;)" linenums="false">
@ -843,6 +1036,8 @@ And both together:
The entire template translation is complete. The next section describes how to load that translation
into the app.
整个模板的翻译就完成了。下一节会讲如何翻译结果加载到应用程序中。
{@a app-pre-translation}
### The app and its translation file
@ -877,6 +1072,9 @@ The sample app and its translation file are now as follows:
To merge the translated text into component templates, compile the app with the completed
translation file. Provide the Angular compiler with three translation-specific pieces of information:
要把已经翻译的文件合并到组件模板,就要用翻译过的文件编译应用。
为 Angular 编译器提供三种与翻译有关的信息:
* The translation file.
翻译文件
@ -887,41 +1085,65 @@ translation file. Provide the Angular compiler with three translation-specific p
* The locale (`fr` or `en-US` for instance).
目标地区(比如 `fr``en-US`)。
The compilation process is the same whether the translation file is in `.xlf` format or in another
format that Angular understands, such as `.xtb`.
无论翻译文件是 `.xlf` 还是 Angular 支持的其它格式(比如 `.xtb`),其编译过程都是一样的。
How you provide this information depends upon whether you compile with
the JIT compiler or the AOT compiler.
你如何提供这些信息取决于你使用的是JIT即时编译器还是AOT预先编译器。
* With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
使用[AOT](guide/i18n#merge-aot)时,用在 CLI 的参数里传入这些信息。
* With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
使用[JIT](guide/i18n#jit)时,在引导时提供。
{@a merge-aot}
### Merge with the AOT compiler
### 使用 AOT 编译器合并
The AOT (_Ahead-of-Time_) compiler is part of a build process that produces a small, fast,
ready-to-run application package.
AOT*预先*)编译器是构建过程的一部分,它可以生成又小又快,直接可用的应用包。
When you internationalize with the AOT compiler, you must pre-build a separate application
package for each language and serve the appropriate package based on either server-side language
detection or url parameters.
当你使用 AOT 编译器进行国际化时,你必须为每种语言预先编译一个独立的应用包,并且依靠服务端语言检测或 URL 参数来找出合适的包。
You also need to instruct the AOT compiler to use your translation file. To do so, you use three
options with the `ng serve` or `ng build` commands:
你还要指示 AOT 编译器使用你的翻译结果文件,要这么做,你就要在 `ng serve``ng build` 命令中使用三个选项:
* `--i18nFile`: the path to the translation file.
`--i18nFile`: 翻译文件的路径
`--i18nFile`: 翻译文件的路径
* `--i18nFormat`: the format of the translation file.
`--i18nFormat`: 翻译文件的格式。
* `--locale`: the locale id.
`--locale`: 地区的 ID。
The example below shows how to serve the French language file created in previous sections of this
guide:
下面的例子演示了如何使用前面部分创建的法语文件来启动开发服务器:
<code-example language="sh" class="code-shell">
ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
@ -980,6 +1202,8 @@ behavior of the compiler. You can use it to provide the translation providers:
Then provide the `LOCALE_ID` in the main module:
然后在主文件包中提供 `LOCALE_ID`
<code-example path="i18n/doc-files/app.module.ts" title="src/app/app.module.ts" linenums="false">
</code-example>
@ -994,16 +1218,26 @@ By default, when a translation is missing, the build succeeds but generates a wa
`Missing translation for message "foo"`. You can configure the level of warning that is generated by
the Angular compiler:
默认情况下,如果缺少了某个翻译文件,构建工具会成功但给出警告(如`Missing translation for message "foo"`)。你可以配置 Angular 编译器生成的警告级别:
* Error: throw an error. If you are using AOT compilation, the build will fail. If you are using JIT
compilation, the app will fail to load.
Error错误抛出错误如果你使用的是 AOT 编译器,构建就会失败。如果使用的是 JIT 编译器,应用的加载就会失败。
* Warning (default): show a 'Missing translation' warning in the console or shell.
Warning警告 - 默认):在控制台中显示一条 “Missing translation” 警告。
* Ignore: do nothing.
Ignore忽略什么也不做。
If you use the AOT compiler, specify the warning level by using the CLI parameter
`--missingTranslation`. The example below shows how to set the warning level to error:
如果你使用 AOT 编译器,可以使用 CLI 参数 `--missingTranslation` 来指定警告级别。下面的例子示范了如何把警告级别设置为 `error`
<code-example language="sh" class="code-shell">
ng serve --aot --missingTranslation=error
@ -1014,6 +1248,8 @@ If you use the JIT compiler, specify the warning level in the compiler config at
the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
error:
如果你要使用 JIT 编译器,就在启动时往编译器的配置中添加一个 `MissingTranslationStrategy` 属性来指定警告级别。下面的例子示范了如何把警告级别设置为 `error`
<code-example path="i18n/doc-files/main.3.ts" title="src/main.ts">
</code-example>