fix: translate more
This commit is contained in:
Zhicheng Wang
parent
75ac1cd5ce
commit
19088b76f8
|
|
@ -153,37 +153,51 @@ Angular的提取工具在翻译源文件中保留**含义**和**描述**，以
|
|||
### Set a custom _id_ to improve search and maintenance
|
||||
|
||||
### 设置一个自定义的`id`来提升可搜索性和可维护性
|
||||
// TODO: Translate
|
||||
|
||||
The angular _i18n_ extractor tool generates a file with a _translation unit_ entry for each `i18n` attribute in a template. By default, it assigns each translation unit a unique _id_ such as this one:
|
||||
|
||||
Angular 的 `i18n` 提取工具会为模板中每个带有`i18n`属性的元素生成一个*翻译单元（translation unit）*条目，并保存到一个文件中。默认情况下，它为每个翻译单元指定一个唯一的`id`，就像这样：
|
||||
|
||||
<code-example path="i18n/src/locale/messages.es.xlf.html" region="generated-id" linenums="false">
|
||||
</code-example>
|
||||
|
||||
This _id_ is obscure and difficult for humans to read or remember.
|
||||
|
||||
这个`id`对于人类来说太晦涩，难于阅读和记忆。
|
||||
|
||||
Worse, when you change the translatable text, perhaps to fix a typo,
|
||||
the extractor tool generates a new _id_ for that translation.
|
||||
You will lose the translation unless you update it with the new _id_.
|
||||
That [complicates maintenance](#maintenance).
|
||||
|
||||
更糟的是，当我们修改这段可翻译的文字时（比如修改一个拼写错误），提取工具会生成一个新的`id`。
|
||||
我们就会丢失这段翻译成果，除非把它修改为新的`id`。那样维护起来就太复杂了。
|
||||
|
||||
Consider specifying your own, meaningful _id_ in the `i18n` attribute, **prefixed with `@@`**.
|
||||
|
||||
要想自己为`i18n`属性指定一个有意义的`id`，可以给它**添加`@@`前缀**。
|
||||
|
||||
<code-example path='i18n/src/app/app.component.1.html' region='i18n-attribute-solo-id' title='app/app.component.html' linenums="false">
|
||||
</code-example>
|
||||
|
||||
Now the extractor tool and compiler will generate a translation unit with _your custom id_ and never change it.
|
||||
|
||||
现在，提取工具和编译器就会用*你的自定义id`生成一个翻译单元，而不会再改变它。
|
||||
|
||||
<code-example path="i18n/src/locale/messages.es.xlf.html" region="custom-id" linenums="false">
|
||||
</code-example>
|
||||
|
||||
Here is the `i18n` attribute with a _definition_, followed by the custom `id`:
|
||||
|
||||
下面这个例子中的`i18n`属性中有一个*定义*，然后跟着自定义`id`：
|
||||
|
||||
<code-example path='i18n/src/app/app.component.1.html' region='i18n-attribute-id' title='app/app.component.html' linenums="false">
|
||||
</code-example>
|
||||
|
||||
Here is a _meaning_ and a _description_ and the _id_ at the end:
|
||||
|
||||
下面这个例子带有*含义*和*描述*，最后是`id`：
|
||||
|
||||
<code-example path='i18n/src/app/app.component.1.html' region='i18n-attribute-meaning-and-id' title='app/app.component.html' linenums="false">
|
||||
</code-example>
|
||||
|
||||
|
|
@ -192,8 +206,12 @@ Here is a _meaning_ and a _description_ and the _id_ at the end:
|
|||
Be sure to define _unique_ custom ids. If you use the same id for 2 _different_ blocks of text, only the first one will be extracted,
|
||||
and its translation used in both blocks of text.
|
||||
|
||||
为了确保定义出*唯一*的自定义id。如果我们对两个*不同的*文本块使用了同一个id，那么就只有一个会被提取出来，然后其翻译结果会被用于全部文本块。
|
||||
|
||||
For example:
|
||||
|
||||
比如：
|
||||
|
||||
```html
|
||||
<p i18n="@@myId">Hello</p>
|
||||
<p i18n="@@myId">Good bye</p>
|
||||
|
|
@ -201,6 +219,8 @@ Here is a _meaning_ and a _description_ and the _id_ at the end:
|
|||
|
||||
with the translation:
|
||||
|
||||
带有翻译结果的：
|
||||
|
||||
```xml
|
||||
<trans-unit id="myId" datatype="html">
|
||||
<source>Hello</source>
|
||||
|
|
@ -210,33 +230,51 @@ Here is a _meaning_ and a _description_ and the _id_ at the end:
|
|||
|
||||
Both `<p>` elements will contain the text `Hola`.
|
||||
|
||||
两个`<p>`元素都会包含文本`Hola`。
|
||||
|
||||
</div>
|
||||
|
||||
{@a no-element}
|
||||
|
||||
### Translate text without creating an element
|
||||
|
||||
### 翻译文本，而不必创建元素
|
||||
|
||||
Suppose there is a stretch of text that you'd like to translate.
|
||||
You could wrap it in a `<span>` tag but for some reason (CSS comes to mind)
|
||||
you don't want to create a new DOM element merely to facilitate translation.
|
||||
|
||||
假设有一段文字要翻译。
|
||||
我们可以把它包装进`<span>`标签中，但是因为某些原因（比如出于CSS方面的考虑），你可能不想仅仅为了翻译而创建一个新的DOM元素。
|
||||
|
||||
Here are two techniques to try.
|
||||
|
||||
可以尝试两种技术来解决这个问题。
|
||||
|
||||
(1) Wrap the text in an `<ng-container>` element. The `<ng-container>` is never rendered:
|
||||
|
||||
(1) 把文本包装进一个`<ng-container>`元素中。而`<ng-container>`永远不会被渲染出来：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.html" region="i18n-ng-container" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
(2) Wrap the text in a pair of HTML comments:
|
||||
|
||||
(2) 把文本包装进一对 HTML 注释中：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.html" region="i18n-with-comment" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
{@a translate-attributes}
|
||||
|
||||
## Add _i18n_ translation attributes
|
||||
|
||||
## 添加 *i18n* 翻译属性
|
||||
|
||||
You've added an image to your template. You care about accessibility too so you add a `title` attribute:
|
||||
|
||||
我们已经把一个图片添加到了模板中。我们也关心可访问性，故此也添加了一个`title`属性：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.1.html" region="i18n-title" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
|
|
@ -244,56 +282,113 @@ The `title` attribute needs to be translated.
|
|||
Angular i18n support has more translation attributes in the form,`i18n-x`, where `x` is the
|
||||
name of the attribute to translate.
|
||||
|
||||
这个 `title` 属性也需要翻译。
|
||||
Angular i18n 支持更多形如`i18n-x`的属性，其中的`x`就是要翻译的属性名。
|
||||
|
||||
To translate the `title` on the `img` tag from the previous example, write:
|
||||
|
||||
为了翻译前面例子中`img`标签上的`title`属性，就要这样写：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.html" region="i18n-title-translate" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
You can also assign a meaning and a description with the `i18n-x="<meaning>|<description>"` syntax.
|
||||
|
||||
我们也同样可以使用`i18n-x="<meaning>|<description>"`语法来指定一个含义和描述。
|
||||
|
||||
{@a cardinality}
|
||||
|
||||
## Handle singular and plural
|
||||
|
||||
## 处理单数与复数
|
||||
|
||||
Different languages have different pluralization rules.
|
||||
|
||||
不同的语言有不同的单复数规则。
|
||||
|
||||
Suppose your application says something about a collection of wolves.
|
||||
In English, depending upon the number of wolves, you could display "no wolves", "one wolf", "two wolves", or "a wolf pack".
|
||||
Other languages might express the _cardinality_ differently.
|
||||
|
||||
假设应用中需要谈论一些狼。
|
||||
在英语中，根据狼的数量，可能要显示为"no wolves"、"one wolf"、"two wolves"或"a wolf pack"。
|
||||
而在其它语言中则可能会有不同的**基数**规则。
|
||||
|
||||
Here's how you could mark up the component template to display the phrase appropriate to the number of wolves:
|
||||
|
||||
下面我们示范要如何书写组件模板来显示适当的短语来表示狼的数量：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.html" region="i18n-plural" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
* The first parameter is the key. It is bound to the component property (`wolves`)
|
||||
that determines the number of wolves.
|
||||
* The first parameter is the key. It is bound to the component property (`wolves`) that determines the number of wolves.
|
||||
|
||||
第一个参数是key。它绑定到了组件中表示狼的数量的`wolves`属性。
|
||||
|
||||
* The second parameter identifies this as a `plural` translation type.
|
||||
|
||||
第二个参数表示这是一个`plural`（复数）翻译类型。
|
||||
|
||||
* The third parameter defines a pluralization pattern consisting of pluralization
|
||||
categories and their matching values.
|
||||
|
||||
第三个参数定义了一组复数表示模式，这个模式由复数类别和它们所匹配的值组成。
|
||||
|
||||
Pluralization categories include:
|
||||
|
||||
复数类别包括：
|
||||
|
||||
* =0 (or any other number)
|
||||
|
||||
=0 （或其它数字）
|
||||
|
||||
* zero
|
||||
|
||||
zero（零）
|
||||
|
||||
* one
|
||||
|
||||
one（一个)
|
||||
|
||||
* two
|
||||
|
||||
two（两个）
|
||||
|
||||
* few
|
||||
|
||||
few（少数）
|
||||
|
||||
* many
|
||||
|
||||
many（很多）
|
||||
|
||||
* other
|
||||
|
||||
other（其它）
|
||||
|
||||
Put the default _English_ translation in braces (`{}`) next to the pluralization category.
|
||||
|
||||
把默认的*英语*翻译结果放在复数类别之后的括号（`{}`）中。
|
||||
|
||||
* When you're talking about one wolf, you could write `=1 {one wolf}`.
|
||||
|
||||
如果要说一只狼，就写`=1 {one wolf}`。
|
||||
|
||||
* For zero wolves, you could write `=0 {no wolves}`.
|
||||
|
||||
如果要说零只狼，就写`=0 {no wolves}`。
|
||||
|
||||
* For two wolves, you could write `=2 {two wolves}`.
|
||||
|
||||
如果要说两只狼，就写`=2 {two wolves}`。
|
||||
|
||||
You could keep this up for three, four, and every other number of wolves.
|
||||
Or you could specify the **`other`** category as a catch-all for any unmatched cardinality
|
||||
and write something like: `other {a wolf pack}`.
|
||||
|
||||
三只、四只或其它数量的狼也都以此类推。
|
||||
或者，我们也可以指定**`other`**类来捕获所有未匹配上的数量，写法为：`other {a wolf pack}`。
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
This syntax conforms to the
|
||||
|
|
@ -303,31 +398,47 @@ that derives from the
|
|||
which specifies the
|
||||
<a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">pluralization rules</a>.
|
||||
|
||||
这个写法符合<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU消息格式</a>，它源自<a href="http://cldr.unicode.org/" title="CLDR">通用区域设置数据库(CLDR)</a>，其中指定了<a href="http://cldr.unicode.org/index/cldr-spec/plural-rules" title="Pluralization Rules">复数规则</a>。
|
||||
|
||||
</div>
|
||||
|
||||
{@a select}
|
||||
|
||||
## Select among alternative texts
|
||||
|
||||
## 在候选文本中选择
|
||||
|
||||
The application displays different text depending upon whether the hero is male or female.
|
||||
These text alternatives require translation too.
|
||||
|
||||
该应用还要根据英雄是男是女而显示出不同的文本，这些候选文本也同样需要翻译。
|
||||
|
||||
You can handle this with a `select` translation.
|
||||
A `select` also follows the
|
||||
<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format">ICU message syntax</a>.
|
||||
You choose among alternative translation based on a string value instead of a number.
|
||||
|
||||
我们可以使用`select`翻译器来处理它。
|
||||
`select`也同样遵循<a href="http://userguide.icu-project.org/formatparse/messages" title="ICU Message Format"> ICU 消息语法</a>。我们在候选文本之间选择，但根据的是一个字符串值而不再是数字。
|
||||
|
||||
The following format message in the component template binds to the component's `gender`
|
||||
property, which outputs either an "m" or an "f".
|
||||
The message maps those values to the appropriate translation:
|
||||
|
||||
组件模板中的下列消息格式绑定到了组件的`gender`属性，这个属性的取值是"m"或"f"。
|
||||
这个消息会把那些值映射到适当的翻译文本：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.html" region="i18n-select" title="src/app/app.component.html" linenums="false">
|
||||
</code-example>
|
||||
|
||||
## Nesting pluralization and selection expressions
|
||||
|
||||
## 把"复数"与"选择"表达式嵌套在一起
|
||||
|
||||
You can also nest different ICU expressions together. For example:
|
||||
|
||||
我们也可以把不同的 ICU 表达式嵌套在一起，比如：
|
||||
|
||||
<code-example path="i18n/src/app/app.component.html" region="i18n-nested" title="src/app/app.component.html">
|
||||
</code-example>
|
||||
|
||||
|
|
@ -503,7 +614,7 @@ This XML element represents the translation of the `<h1>` greeting tag you marke
|
|||
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 "设置自定义id")，那样设置起来更简单，但是在HTML源码中**不需要`@@`前缀**。
|
||||
注意，翻译单元`id=introductionHeader`派生自[*自定义*`id`](#custom-id "设置自定义id")，它设置起来更简单，但是在HTML源码中**不需要`@@`前缀**。
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -728,7 +839,6 @@ in the `index.html`.
|
|||
### SystemJS文本插件
|
||||
|
||||
<div class="alert is-important">
|
||||
// TODO: Translate
|
||||
This plugin only applies to an application using SystemJS. If you are using the Angular CLI, please refer to their
|
||||
[docs](https://github.com/angular/angular-cli/wiki/xi18n).
|
||||
|
||||
|
|
|
|||
|
|
@ -19,13 +19,16 @@ In Angular, the component plays the part of the controller/viewmodel, and the te
|
|||
从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。
|
||||
在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
|
||||
|
||||
// TODO: Translate
|
||||
This page is a comprehensive technical reference to the Angular template language.
|
||||
It explains basic principles of the template language and describes most of the syntax that you'll encounter elsewhere in the documentation.
|
||||
|
||||
这是一篇关于 Angular 模板语言的技术大全。
|
||||
它解释了模板语言的基本原理，并描述了我们将在文档中其它地方遇到的大部分语法。
|
||||
|
||||
Many code snippets illustrate the points and concepts, all of them available
|
||||
in the <live-example title="Template Syntax Live Code"></live-example>.
|
||||
|
||||
这里还有很多代码片段用来解释技术点和概念，它们全都在<live-example title="模板语法的在线例子"></live-example>中。
|
||||
|
||||
{@a html}
|
||||
## HTML in templates
|
||||
|
|
|
|||
|
|
@ -692,24 +692,33 @@ Next, create an `app.module.ts` file and add the following `NgModule` class:
|
|||
<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="ngmodule" title="app.module.ts">
|
||||
</code-example>
|
||||
|
||||
// TODO: Translate
|
||||
This bare minimum `NgModule` imports `BrowserModule`, the module every Angular browser-based app must have.
|
||||
It also imports `UpgradeModule` from `@angular/upgrade/static`, which exports providers that will be used
|
||||
for upgrading and downgrading services and components.
|
||||
|
||||
最小化的`NgModule`导入了`BrowserModule`，它是每个基于浏览器的 Angular 应用必备的。
|
||||
它还从`@angular/upgrade/static`中导入了`UpgradeModule`，它导出了一些服务提供商，这些提供商会用于升级、降级服务和组件。
|
||||
|
||||
In the constructor of the `AppModule`, use dependency injection to get a hold of the `UpgradeModule` instance,
|
||||
and use it to bootstrap the AngularJS app in the `AppModule.ngDoBootstrap` method.
|
||||
The `upgrade.bootstrap` method takes the exact same arguments as [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap):
|
||||
|
||||
在 `AppModule` 的构造函数中，使用依赖注入技术获取了一个 `UpgradeModule` 实例，并用它在`AppModule.ngDoBootstrap`方法中启动 AngularJS 应用。
|
||||
`upgrade.bootstrap` 方法接受和 [angular.bootstrap](https://docs.angularjs.org/api/ng/function/angular.bootstrap) 完全相同的参数。
|
||||
|
||||
<div class="l-sub-section">
|
||||
|
||||
Note that you do not add a `bootstrap` declaration to the `@NgModule` decorator, since
|
||||
AngularJS will own the root template of the application.
|
||||
|
||||
注意，我们不需要在 `@NgModule` 中加入 `bootstrap` 声明，因为 AngularJS 控制着该应用的根模板。
|
||||
|
||||
</div>
|
||||
|
||||
Now you can bootstrap `AppModule` using the `platformBrowserDynamic.bootstrapModule` method.
|
||||
|
||||
现在，我们就可以使用 `platformBrowserDynamic.bootstrapModule` 方法来启动 `AppModule` 了。
|
||||
|
||||
<code-example path="upgrade-module/src/app/ajs-a-hybrid-bootstrap/app.module.ts" region="bootstrap" title="app.module.ts'">
|
||||
</code-example>
|
||||
|
||||
|
|
|
|||
|
|
@ -146,6 +146,6 @@ Along the way, you'll become familiar with many of the core fundamentals of Angu
|
|||
|
||||
这一路上，我们将遇到很多 Angular 核心原理。
|
||||
|
||||
// TODO: Translate
|
||||
|
||||
Start now by building a simple [hero editor](tutorial/toh-pt1 "The Hero Editor").
|
||||
|
||||
现在就开始构建一个简单的[英雄编辑器](tutorial/toh-pt1 "英雄编辑器")吧！
|
||||
Loading…
Reference in New Issue