An unsurprising observation for a demo. To be honest,
jazzing it up won't teach you anything new about forms.
diff --git a/aio/content/guide/frequent-ngmodules.md b/aio/content/guide/frequent-ngmodules.md
index dc67f78290..1af996c897 100644
--- a/aio/content/guide/frequent-ngmodules.md
+++ b/aio/content/guide/frequent-ngmodules.md
@@ -113,12 +113,11 @@ Angular 应用需要不止一个模块，它们都为根模块服务。
- When you build template driven forms (includes NgModel)
+ When you want to build template driven forms (includes NgModel)
当要构建模板驱动表单时（它包含 NgModel ）
|
-
@@ -137,36 +136,17 @@ Angular 应用需要不止一个模块，它们都为根模块服务。
|
- When building reactive forms
+ When you want to build reactive forms
当要构建响应式表单时
|
-
-
-
-
- RouterModule
-
- |
-
-
-
- @angular/router
-
- |
-
-
-
- For Routing and when you want to use RouterLink,.forRoot(), and .forChild()
-
- 要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时
-
- |
-
+ RouterModule |
+ @angular/router |
+ When you want to use RouterLink,.forRoot(), and .forChild()要使用路由功能，并且你要用到 RouterLink,.forRoot() 和 .forChild() 时 |
@@ -185,12 +165,11 @@ Angular 应用需要不止一个模块，它们都为根模块服务。
|
- When you to talk to a server
+ When you want to talk to a server
当你要和服务器对话时
|
-
diff --git a/aio/content/guide/glossary.md b/aio/content/guide/glossary.md
index f5d0c52a90..f4090025c3 100644
--- a/aio/content/guide/glossary.md
+++ b/aio/content/guide/glossary.md
@@ -42,6 +42,18 @@ Compare [just-in-time (JIT) compilation](guide/glossary#jit).
可以与[即时(JIT)编译](guide/glossary#jit)对比一下。
+## Angular element
+
+## Angular 元素
+
+An Angular [component](guide/glossary#component) that has been packaged as a [custom element](guide/glossary#custom-element).
+
+被包装成[自定义元素](guide/glossary#custom-element)的 Angular [组件](guide/glossary#component)。
+
+Learn more in the [_Angular Elements_](guide/elements) guide.
+
+参见 [_Angular 元素_](guide/elements) 一文。
+
## Annotation
## 注解
@@ -179,15 +191,22 @@ A [decorator](guide/glossary#decorator) statement immediately before a field in
出现在类定义中属性紧前方的[装饰器](guide/glossary#decorator)语句用来声明该字段的类型。比如 `@Input` 和 `@Output`。
+{@a cli}
+
## CLI
-The [Angular CLI](https://cli.angular.io/) is a command-line tool that can create a project, add files, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.
+The [Angular CLI](https://cli.angular.io/) is a command-line tool for managing the Angular development cycle. Use it to create the initial filesystem scaffolding for a [workspace](guide/glossary#workspace) or [project](guide/glossary#project), and to run [schematics](guide/glossary#schematic) that add and modify code for initial generic versions of various elements. The tool supports all stages of the development cycle, including building, testing, bundling, and deployment.
-[Angular CLI](https://cli.angular.io/) 是个命令行（Command Line Interface）工具，它可以创建项目、添加文件以及执行各种正在进行的开发任务，比如测试、打包和部署。
+[Angular CLI](https://cli.angular.io/) 是一个命令行工具，用于管理 Angular 的开发周期。它用于为[工作空间](guide/glossary#workspace)或[项目](guide/glossary#project)创建初始的脚手架，并且运行[生成器（schematics）](guide/glossary#schematic)来为初始生成的版本添加或修改各类代码。
+该工具支持开发周期中的所有阶段，比如构建、测试、打包和部署。
-Learn more in the [Getting Started](guide/quickstart) guide.
+* To begin using the CLI for a new project, see [Getting Started](guide/quickstart) guide.
-要了解更多，参见[快速起步](guide/quickstart)。
+ 要开始使用 CLI 来创建新项目，参见[快速起步](guide/quickstart)。
+
+* To learn more about the full capabilities of the CLI, see the [Angular CLI documentation].(https://github.com/angular/angular-cli/wiki).
+
+ 要学习 CLI 的所有功能，参见 [Angular CLI 文档].(https://github.com/angular/angular-cli/wiki)
{@a component}
@@ -195,11 +214,12 @@ Learn more in the [Getting Started](guide/quickstart) guide.
## 组件 (component)
-A class with the `@Component` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template).
+A class with the `@Component` [decorator](guide/glossary#decorator) that associates it with a companion [template](guide/glossary#template). Together, the component and template define a [view](guide/glossary#view).
一个带有 `@Component` [装饰器](guide/glossary#decorator)的类，用来为它关联一个与之相伴的[模板](guide/glossary#template)。
-A component is a special type of [directive](guide/glossary#directive) that represents a [view](guide/glossary#view).The `@Component` decorator extends the `@Directive` decorator with template-oriented features.
+A component is a special type of [directive](guide/glossary#directive).
+The `@Component` decorator extends the `@Directive` decorator with template-oriented features.
组件是[指令](guide/glossary#directive)的一种特例，它表示一个[视图](guide/glossary#view)。`@Component` 装饰器扩展了 `@Directive` 装饰器，增加了一些与模板有关的特性。
@@ -215,7 +235,7 @@ Read more about components, templates, and views in the [Architecture](guide/arc
## Custom element
-## 自定义元素
+## 自定义元素（Custom element）
A Web Platform feature, currently supported by most browsers, and available in other browsers through polyfills (see [Browser Support](guide/browser-support)).
@@ -358,7 +378,8 @@ A design pattern and mechanism for creating and delivering parts of an applicati
依赖注入既是设计模式，同时又是一种机制：当应用程序的一些部件（即一些依赖）需要另一些部件时，
利用依赖注入来创建被请求的部件，并将它们注入到需要它们的部件中。
-In Angular, dependencies are typically services, but can also be values, such as strings or functions. An [injector](guide/glossary#injector) for an app (created automatically during bootstrap) creates dependencies when needed, using a registered [provider](guide/glossary#provider) of the service or value. Different providers can provide different implementations of the same service.
+In Angular, dependencies are typically services, but can also be values, such as strings or functions.
+An [injector](guide/glossary#injector) for an app (created automatically during bootstrap) instantiates dependencies when needed, using a configured [provider](guide/glossary#provider) of the service or value.
在 Angular 中，依赖通常是服务，但是也可以是值，比如字符串或函数。应用的[注入器](guide/glossary#injector)（它是在启动期间自动创建的）会使用该服务或值的已注册[提供商](guide/glossary#provider)来按需创建这些依赖。各个不同的提供商可以为同一个服务提供不同的实现。
@@ -370,7 +391,7 @@ Learn more in the [Dependency Injection](guide/dependency-injection) guide.
## DI token
-## DI 令牌
+## DI 令牌（Token）
A lookup token associated with a dependency [provider](guide/glossary#provider), for use with the [dependency injection](guide/glossary#di) system.
@@ -467,7 +488,7 @@ To learn more, see the [Browser Support](guide/browser-support) page.
## Element
-## 元素
+## 元素（Element）
Angular defines an `ElementRef` class to wrap render-specific native UI elements. This allows you use Angular templates and data-binding to access DOM elements without reference to the native element in most cases.
@@ -483,9 +504,9 @@ Compare [Custom element](guide/glossary#custom-element).
## Entry point
-## 入口点
+## 入口点（Entry Point）
-A JavaScript ID that makes parts of an NPM package available for import by other code.
+A JavaScript symbol that makes parts of an npm package available for import by other code.
The Angular [scoped packages](guide/glossary#scoped-package) each have an entry point named `index`.
JavaScript 的 ID 用来让这段代码成为 NPM 包的一部分，从而让其它代码能导入它。
@@ -523,7 +544,17 @@ Both a [service](guide/glossary#service) and a [component](guide/glossary#compon
An object in the Angular [dependency-injection system](guide/glossary#dependency-injection)
that can find a named dependency in its cache or create a dependency
-with a registered [provider](guide/glossary#provider). Injectors are created for NgModules automatically as part of the bootstrap process, and inherited through the component hierarchy.
+using a configured [provider](guide/glossary#provider).
+Injectors are created for NgModules automatically as part of the bootstrap process
+and are inherited through the component hierarchy.
+
+* An injector provides a singleton instance of a dependency, and can inject this same instance in multiple components.
+
+* A hierarchy of injectors at the NgModule and component level can provide different instances of a dependency to their own components and child components.
+
+* You can configure injectors with different providers that can provide different implementations of the same dependency.
+
+Learn more about the injector hierarchy in the [Dependency Injection guide](guide/hierarchical-dependency-injection).
Angular [依赖注入系统](guide/glossary#dependency-injection)中可以在缓存中根据名字查找依赖，也可以通过已注册的[提供商](guide/glossary#provider)来创建依赖。
启动过程中会自动为每个模块创建一个注入器，并被组件树继承。
@@ -599,7 +630,7 @@ Compare [ahead-of-time (AOT) compilation](guide/glossary#aot).
## Lazy loading
-## 惰性加载
+## 惰性加载（Lazy loading）
Lazy loading speeds up application load time by splitting the application into multiple bundles and loading them on demand.
For example, dependencies can be lazy-loaded as needed&emdash;as opposed to "eager-loaded" modules that are required by the root module, and are thus loaded on launch.
@@ -609,9 +640,27 @@ Similarly, the [router](guide/glossary#router) can load child views only when th
比如，一些依赖可以根据需要进行惰性加载，与之相对的是那些 "急性加载" 的模块，它们是根模块所要用的，因此会在启动期间加载。
同样，[路由器](guide/glossary#router)只有当父视图激活时才需要加载子视图，你还可以构建一些自定义元素，它们也可以在需要时才加载进 Angular 应用。
+{@a library}
+
+## Library
+
+## 库（Library）
+
+In Angular, a [project](guide/glossary#project) that provides functionality that can be included in other Angular apps. A library is not a complete Angular app, and it cannot run independently.
+
+一种 Angular [项目](guide/glossary#project)。用来让其它 Angular 应用包含它，以提供各种功能。库不是一个完整的 Angular 应用，不能独立运行。
+
+* Library developers can use the [CLI](guide/glossary#cli) to `generate` scaffolding for a new library in an existing [workspace](guide/glossary#workspace), and can publish a library as an `npm` package.
+
+ 库的开发者可以使用 [CLI](guide/glossary#cli) 在现有的 [工作空间](guide/glossary#workspace) 中 `generate` 新库的脚手架，还能把库发布为 `npm` 包。
+
+* App developers can use the [CLI](guide/glossary#cli) to `add` a published library for use with an app in the same [workspace](guide/glossary#workspace).
+
+ 应用开发者可以使用 [CLI](guide/glossary#cli) 来把一个已发布的库 `add` 进这个应用所在的[工作空间](guide/glossary#workspace)。
+
## Lifecycle hook
-## 生命周期钩子
+## 生命周期钩子（Lifecycle hook）
An interface that allows you to tap into the lifecycle of [directives](guide/glossary#directive) and [components](guide/glossary#component) as they are created, updated, and destroyed.
@@ -676,7 +725,7 @@ In JavaScript (ECMAScript), each file is a module and all objects defined in the
在 JavaScript (ECMAScript) 中，每个文件都是一个模块，该文件中定义的所有对象都属于这个模块。这些对象可以导出为公共对象，而这些公共对象可以被其它模块导入后使用。
-Angular ships as a collection of JavaScript modules, or libraries. Each Angular library name begins with the `@angular` prefix. Install them with the NPM package manager and import parts of them with JavaScript `import` declarations.
+Angular ships as a collection of JavaScript modules, or libraries. Each Angular library name begins with the `@angular` prefix. Install them with the npm package manager and import parts of them with JavaScript `import` declarations.
Angular 就是用一组 JavaScript 模块（或叫库）的形式发布的。每个 Angular 库都带有 `@angular` 前缀。
使用 NPM 包管理器安装它们，并且使用 JavaScript 的 `import` 声明语句从中导入各个部件。
@@ -738,7 +787,7 @@ Angular uses a third-party library called [Reactive Extensions (RxJS)](http://re
Angular 使用一个名叫[响应式扩展 (RxJS)](http://reactivex.io/rxjs/)的第三方包来实现这些功能。
-To learn more, see the [Observables](guide/glossary#observable) guide.
+To learn more, see the [Observables](guide/observables) guide.
要了解更多，参见[可观察对象](guide/glossary#observable)。
@@ -746,7 +795,7 @@ To learn more, see the [Observables](guide/glossary#observable) guide.
## Observer
-## 观察者
+## 观察者（Observer）
An object passed to the `subscribe()` method for an [observable](guide/glossary#observable) that defines the callbacks for the [subscriber](guide/glossary#subscriber).
@@ -791,10 +840,21 @@ To learn more, see the [pipes](guide/pipes) page.
## 腻子脚本（polyfill）
-An [NPM package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. See the [Browser Support](guide/browser-support) guide for polyfills that support particular functionality for particular platforms.
+An [npm package](guide/npm-packages) that plugs gaps in a browser's JavaScript implementation. See the [Browser Support](guide/browser-support) guide for polyfills that support particular functionality for particular platforms.
一个 [NPM 包](guide/npm-packages)，它负责弥补浏览器 JavaScript 实现与最新标准之间的 "缝隙"。参见[浏览器支持](guide/browser-support)页，以了解要在特定平台支持特定功能时所需的腻子脚本。
+{@a project}
+
+## Project
+
+## 项目（Project）
+
+In Angular, a folder within a [workspace](guide/glossary#workspace) that contains an Angular app or [library](guide/glossary#library). A workspace can contain multiple projects. All apps in a workspace can use libraries in the same workspace.
+
+在 Angular 中，是指[工作空间](guide/glossary#workspace)中的一个文件夹，它包含 Anuglar 应用或[库](guide/glossary#library)。
+每个工作空间中可以包含多个项目。工作空间中的每个应用都可以使用同一工作空间中的任意库。
+
## Provider
## 提供商 (provider)
@@ -903,12 +963,27 @@ For more information, see the [Routing & Navigation](guide/router) page.
{@a S}
+{@a schematic}
+
+## Schematic
+
+A scaffolding library that defines how to generate or transform a programming project by creating, modifying, refactoring, or moving files and code.
+
+The Angular [CLI](guide/glossary#cli) uses schematics to generate and modify [Angular projects](guide/glossary#project) and parts of projects.
+
+* Angular provides a set of schematics for use with the CLI.
+For details, see [Angular CLI documentation].(https://github.com/angular/angular-cli/wiki).
+
+* Library developers can create schematics that enable the CLI to generate their published libraries.
+For more information, see https://www.npmjs.com/package/@angular-devkit/schematics.
+
+
## Scoped package
## 范围化包 (scoped package)
-A way to group related NPM packages.
-NgModules are delivered within *scoped packages* whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/http`, and `@angular/router`.
+A way to group related npm packages.
+NgModules are delivered within *scoped packages* whose names begin with the Angular *scope name* `@angular`. For example, `@angular/core`, `@angular/common`, `@angular/forms`, and `@angular/router`.
一种把相关的 NPM 包分组到一起的方式。
Angular 的 NgModule 都是在一些以 `@angular` 为范围名的*范围化包*中发布的。比如 `@angular/core`、`@angular/common`、`@angular/http` 和 `@angular/router`。
@@ -945,7 +1020,7 @@ To learn more, see [Introduction to Services](guide/architecture-services).
## Structural directives
-## 结构型指令
+## 结构型指令（Structural directives）
A category of [directive](guide/glossary#directive) that is responsible for shaping or reshaping HTML layout by modifying the DOM (adding, removing, or manipulating elements and their children).
@@ -959,7 +1034,7 @@ To learn more, see the [Structural Directives](guide/structural-directives) page
## Subscriber
-## 订阅者
+## 订阅者（Subscriber）
A function that defines how to obtain or generate values or messages to be published. This function is executed when a consumer calls the `subscribe()` method of an [observable](guide/glossary#observable).
@@ -1068,7 +1143,7 @@ of the [Template Syntax](guide/template-syntax) page.
## Token
-## 令牌
+## 令牌（Token）
An opaque identifier used for efficient table lookup. In Angular, a [DI token](guide/glossary#di-token) is used to find [providers](guide/glossary#provider) of dependencies in the [dependency injection](guide/glossary#di) system.
@@ -1141,7 +1216,7 @@ View hierarchies can be loaded and unloaded dynamically as the user navigates th
## View hierarchy
-## 视图树
+## 视图树（View hierarchy）
A tree of related views that can be acted on as a unit. The root view is a component's _host view_. A host view can be the root of a tree of _embedded views_, collected in a _view container_ (`ViewContainerRef`) attached to an anchor element in the hosting component. The view hierarchy is a key part of Angular change detection.
@@ -1161,6 +1236,18 @@ See [Custom element](guide/glossary#custom-element)
参见[自定义元素](guide/glossary#custom-element)
+{@a workspace}
+
+## Workspace
+
+## 工作空间（Workspace）
+
+In Angular, a folder that contains [projects](guide/glossary#project) (that is, apps and libraries).
+The [CLI](guide/glossary#cli) `new` command creates a workspace to contain projects. Commands such as `add` and `generate`, that create or operate on apps and libraries, must be executed from within a workspace folder.
+
+在 Angular 中，是指一个包含[项目](guide/glossary#project)（即应用和库）的文件夹。
+[CLI](guide/glossary#cli) 的 `new` 命令会创建一个包含项目的工作空间。而用来创建或操作应用和库的 `add` 和 `generate` 命令必须在工作空间目录下才能执行。
+
{@a X}
{@a Y}
diff --git a/aio/content/guide/hierarchical-dependency-injection.md b/aio/content/guide/hierarchical-dependency-injection.md
index 22abd12ccb..1231f32f26 100644
--- a/aio/content/guide/hierarchical-dependency-injection.md
+++ b/aio/content/guide/hierarchical-dependency-injection.md
@@ -41,7 +41,7 @@ The tree of components parallels the tree of injectors.
一个 Angular 应用是一个组件树。每个组件实例都有自己的注入器！
组件的树与注入器的树平行。
-
+
The component's injector may be a _proxy_ for an ancestor injector higher in the component tree.
That's an implementation detail that improves efficiency.
@@ -84,7 +84,7 @@ If it runs out of ancestors, Angular throws an error.
这个申请继续往上冒泡 —— 直到找到了一个能处理此申请的注入器或者超出了组件树中的祖先位置为止。
如果超出了组件树中的祖先还未找到，Angular 就会抛出一个错误。
-
+
You can cap the bubbling. An intermediate component can declare that it is the "host" component.
The hunt for providers will climb no higher than the injector for that host component.
@@ -280,7 +280,7 @@ No tax return overwriting. No mess.
在组件级提供服务可以确保组件的*每个*实例都得到一个自己的、私有的服务实例。
报税单不会再被意外覆盖，这下清楚了。
-
+
The rest of the scenario code relies on other Angular features and techniques that you can learn about elsewhere in the documentation.
You can review it and download it from the
.
@@ -337,7 +337,7 @@ its injector produces an instance of `Car` resolved by injector (C) with an `Eng
-
+
The code for this _cars_ scenario is in the `car.components.ts` and `car.services.ts` files of the sample
which you can review and download from the
.
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md
index f3e1226ca2..63a54ea8dc 100644
--- a/aio/content/guide/http.md
+++ b/aio/content/guide/http.md
@@ -685,7 +685,7 @@ If there is a search term, the code constructs an options object with an HTML UR
如果有搜索词，这段代码就会构造一个包含进行过 URL 编码的搜索词的选项对象。如果这个搜索词是“foo”，这个 GET 请求的 URL 就会是 `api/heroes/?name=foo`。
-The `HttpParms` are immutable so you'll have to use the `set()` method to update the options.
+The `HttpParams` are immutable so you'll have to use the `set()` method to update the options.
`HttpParams` 是不可变的，所以你也要使用 `set()` 方法来修改这些选项。
@@ -767,7 +767,7 @@ A search value reaches the service only if it's a new value and the user has sto
这样，只有当用户停止了输入且搜索值和以前不一样的时候，搜索值才会传给服务。
-
+
The `withRefresh` option is explained [below](#cache-refresh).
@@ -796,7 +796,7 @@ server returns them out of order.
它会按照原始的请求顺序返回这些服务的响应，而不用关心服务器实际上是以乱序返回的它们。
-
+
If you think you'll reuse this debouncing logic,
consider moving it to a utility function or into the `PackageSearchService` itself.
@@ -967,7 +967,7 @@ you won't have to revisit the `AppModule`.
当你再创建新的拦截器时，就同样把它们添加到 `httpInterceptorProviders` 数组中，而不用再修改 `AppModule`。
-
+
There are many more interceptors in the complete sample code.
@@ -1300,7 +1300,7 @@ The _cache-then-refresh_ option is triggered by the presence of a **custom `x-re
这种*缓存并刷新*的选项是由**自定义的 `x-refresh` 头**触发的。
-
+
A checkbox on the `PackageSearchComponent` toggles a `withRefresh` flag,
which is one of the arguments to `PackageSearchService.search()`.
@@ -1609,7 +1609,7 @@ Call `request.flush()` with an error message, as seen in the following example.
diff --git a/aio/content/guide/i18n.md b/aio/content/guide/i18n.md
index 9ce2cab2b6..8b8326e60d 100644
--- a/aio/content/guide/i18n.md
+++ b/aio/content/guide/i18n.md
@@ -79,13 +79,12 @@ By default, Angular uses the locale `en-US`, which is English as spoken in the U
默认情况下，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:
+To set your app's locale to another value, use the CLI parameter `--configuration` with the value of the locale id that you want to use:
要把你的应用的地区改为其它值，可以使用 CLI 参数 `--locale` 来传入你要使用的地区标识：
- ng serve --aot --locale fr
+ ng serve --configuration=fr
If you use JIT, you also need to define the `LOCALE_ID` provider in your main module:
@@ -95,12 +94,12 @@ 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
+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
+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)。
@@ -136,7 +135,7 @@ Angular 的管道可以帮助你进行国际化：`DatePipe`、`CurrencyPipe`、
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
+The CLI imports the locale data for you when you use the parameter `--configuration` with `ng serve` and
`ng build`.
默认情况下，Angular 只包含 `en-US` 的本地化数据。如果你要把 `LOCALE_ID` 的值设置为其它地区，就必须为那个新地区导入本地化数据。
@@ -162,33 +161,31 @@ locale id "fr-FR" instead of "fr".
如果你要使用其它地区标识来注册这个导入的本地化数据，可以在第二个参数中指定一个自定义的地区标识。
比如，Angular 为法语定义的地区标识是 “fr”，你可以通过第二个参数为这些导入的法语本地化数据指定一个自定义的地区标识 “fr-FR”。
-The files in `@angular/common/locales` contain most of the locale data that you
+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` 中的文件包含你需要的大多数本地化数据，
不过有些高级的格式选项只存在于从 `@angular/common/locales/extra` 中导入的扩展数据集中。遇到这种情况，你就会收到一条错误信息。
-
-
## Template translations
## 模板翻译
-
+
- This document refers to a unit of translatable text as "text," a "message", or a
- "text message."
+ This document refers to a unit of translatable text as "text," a "message", or a
+ "text message."
本文档中会把翻译文本的最小单元称为“文本”、“消息”或“文本消息”。
@@ -263,7 +260,7 @@ To mark the greeting for translation, add the `i18n` attribute to the `
` tag
### 用描述和意图来帮助翻译人员
-To translate a text message accurately, the translator may need additional information or context.
+To translate a text message accurately, the translator may need additional information or context.
要想翻译的更准确，翻译人员可能需要待翻译文本的额外信息或场景说明。
@@ -275,7 +272,7 @@ example below:
-The translator may also need to know the meaning or intent of the text message within this particular
+The translator may also need to know the meaning or intent of the text message within this particular
app context.
为了给出正确的翻译，翻译者需要知道你这段文本在特定情境下的*含义*或*真实意图*。
@@ -298,7 +295,7 @@ The Angular extraction tool preserves both the meaning and the description in th
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.
+text messages with different descriptions (not different meanings), then they are extracted only once.
Angular 的提取工具会在翻译源文件中保留**含义**和**描述**，以支持符合特定上下文的翻译。但它只会使用含义和文本消息的组合来为待翻译文本生成明确的 id。如果你有两个相同的文本消息，但是含义不同，它们就会被分别提取。如果你有两个相同的文本消息，但是描述不同（但含义相同），它们就只会提取一次。
@@ -323,7 +320,7 @@ You must then update the translation file with the new 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`:
+The example below defines the custom id `introductionHeader`:
另一种方案是，你可以使用 `@@` 前缀在 `i18n` 属性中指定一个自定义的 id。
下面这个例子就定义了一个自定义 id `introductionHeader`：
@@ -340,7 +337,7 @@ 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.
+Therefore, you do not need to update the translation. This approach makes maintenance easier.
自定义 id 是永久性的，翻译工具待翻译文本发生变化时不会修改它。
因此，你不必修改翻译结果。这种方式可以让维护变得更简单。
@@ -414,6 +411,8 @@ the same text, `Bonjour`:
Bonjour
+ ```
+
```
@@ -512,7 +511,7 @@ the number of minutes.
第三个参数定义了一组复数表示模式，这个模式由复数类别和它们所匹配的值组成。
-
+
This syntax conforms to the
ICU Message Format
@@ -569,7 +568,7 @@ for two, three, or any other number if the pluralization rules were different. F
在上面的例子中，这三个选项都是根据复数模式来指定的。要说零分钟，就用 `=0 {just now}`。一分钟就用 `=1 {one minute}`。
无法匹配的数量就用 `other {{{minutes}} minutes ago}`。如果复数规则与此不同，你还可以为两个、三个火任意数量添加更多的模式。对于这个 “minute” 的例子，英语中只要这三种模式就够了。
-
+
You can use interpolations and html markup inside of your translations.
@@ -642,7 +641,7 @@ By default, the tool generates a translation file named `messages.xlf` in the
本工具默认会生成一个名叫 `messages.xlf` 的翻译文件，格式为
XML本土化互换文件格式(XLIFF, version 1.2)。
-
+
If you don't use the CLI, you have two options:
@@ -689,16 +688,16 @@ these example commands:
你可以使用 `--i18nFormat` 来明确指定想用的格式，范例如下：
-ng xi18n --i18nFormat=xlf
-ng xi18n --i18nFormat=xlf2
-ng xi18n --i18nFormat=xmb
+ng xi18n --i18n-format=xlf
+ng xi18n --i18n-format=xlf2
+ng xi18n --i18n-format=xmb
The sample in this guide uses the default XLIFF 1.2 format.
本章的范例使用默认的 XLIFF 1.2 格式。
-
+
XLIFF files have the extension .xlf. The XMB format generates .xmb source files but uses
.xtb (XML Translation Bundle: XTB) translation files.
@@ -714,13 +713,13 @@ 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`:
+the parameter `--output-path`:
你还可以使用 `--outputPath` 参数在 CLI 提取翻译源文件时指定输出路径：
- ng xi18n --outputPath src/locale
+ ng xi18n --output-path locale
@@ -731,17 +730,17 @@ the parameter `--outFile`:
- ng xi18n --outFile source.xlf
+ ng xi18n --out-file source.xlf
-You can specify the base locale of your app with the parameter `--locale`:
+You can specify the base locale of your app with the parameter `--i18n-locale`:
你还可以使用 `--locale` 参数来指定应用的基本地区：
- ng xi18n --locale fr
+ ng xi18n --i18n-locale fr
@@ -757,7 +756,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.
+folder.
`ng xi18n` 命令会在项目根目录生成一个名为 `messages.xlf` 的翻译源文件。
@@ -783,7 +782,7 @@ internationalization files, there.
方法之一是为本土化和相关资源（比如国际化文件）创建一个专门的目录。
-
+
Localization and internationalization are
different but
@@ -850,7 +849,7 @@ This sample file is easy to translate without a special editor or knowledge of F
> This XML element represents the translation of the `` greeting tag that you marked with the
- `i18n` attribute earlier in this guide.
+ `i18n` attribute earlier in this guide.
> 这个 XML 元素表示前面你加过 `i18n` 属性的那个打招呼用的 `` 标签。
@@ -923,7 +922,7 @@ 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
+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)）。
@@ -980,7 +979,7 @@ Here they are together, after translation:
### 翻译嵌套的表达式
-A nested expression is similar to the previous examples. As in the previous example, there are
+A nested expression is similar to the previous examples. As in the previous example, there are
two translation units. The first one contains the text outside of the nested expression:
嵌套的表达式和前一节没有什么不同。就像上一个例子中那样，这里有*两个*翻译单元。
@@ -1065,9 +1064,9 @@ the JIT compiler or the AOT compiler.
你如何提供这些信息取决于你使用的是JIT（即时）编译器还是AOT（预先）编译器。
- * With [AOT](guide/i18n#merge-aot), you pass the information as a CLI parameter.
+ * With [AOT](guide/i18n#merge-aot), you pass the information as a configuration
- 使用[AOT](guide/i18n#merge-aot)时，用在 CLI 的参数里传入这些信息。
+ 使用[AOT](guide/i18n#merge-aot)时，用配置项传入这些信息。
* With [JIT](guide/i18n#merge-jit), you provide the information at bootstrap time.
@@ -1090,30 +1089,95 @@ 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:
+You also need to instruct the AOT compiler to use your translation configuration. To do so, you configure the translation with three options in your `angular.json` file.
你还要指示 AOT 编译器使用你的翻译结果文件，要这么做，你就要在 `ng serve` 或 `ng build` 命令中使用三个选项：
-* `--i18nFile`: the path to the translation file.
+* `i18nFile`: the path to the translation file.
- `--i18nFile`: 翻译文件的路径。
+ `i18nFile`: 翻译文件的路径。
-* `--i18nFormat`: the format of the translation file.
+* `i18nFormat`: the format of the translation file.
- `--i18nFormat`: 翻译文件的格式。
+ `i18nFormat`: 翻译文件的格式。
-* `--locale`: the locale id.
+* `i18nLocale`: the locale id.
- `--locale`: 地区的 ID。
+ `i18nLocale`: 地区的 id.
-The example below shows how to serve the French language file created in previous sections of this
-guide:
+```
+"build": {
+ ...
+ "configurations": {
+ ...
+ "fr": {
+ "aot": true,
+ "outputPath": "dist/my-project-fr/",
+ "i18nFile": "src/locale/messages.fr.xlf",
+ "i18nFormat": "xlf",
+ "i18nLocale": "fr",
+ ...
+ }
+ }
+},
+"serve": {
+ ...
+ "configurations": {
+ ...
+ "fr": {
+ "browserTarget": "*project-name*:build:fr"
+ }
+ }
+}
+```
+You then pass the configuration with the `ng serve` or `ng build` commands.
+The example below shows how to serve the French language file created in previous
+sections of this guide:
+
+你可以通过 `ng serve` 或 `ng build` 命令来传入这些配置项。
下面的例子演示了如何使用前面部分创建的法语文件来启动开发服务器：
- ng serve --aot --i18nFile=src/locale/messages.fr.xlf --i18nFormat=xlf --locale=fr
+ ng serve --configuration=fr
+
+
+For production builds, you define a separate `production-fr` build configuration in
+your `angular.json`.
+
+```
+"configurations": {
+ ...
+ "production-fr": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "optimization": true,
+ "outputHashing": "all",
+ "sourceMap": false,
+ "extractCss": true,
+ "namedChunks": false,
+ "aot": true,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true,
+ "outputPath": "dist/my-project-fr/",
+ "i18nFile": "src/locale/messages.fr.xlf",
+ "i18nFormat": "xlf",
+ "i18nLocale": "fr",
+ "i18nMissingTranslation": "error"
+ },
+ ...
+}
+```
+
+The same configuration options can also be provided through the CLI with your existing `production` configuration.
+
+
+ ng build --prod --i18n-file src/locale/messages.fr.xlf --i18n-format xlf --i18n-locale fr
{@a merge-jit}
@@ -1197,14 +1261,19 @@ compilation, the app will fail to load.
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:
+You specify the warning level in the `configurations` section your Angular CLI build configuration. The example below shows how to set the warning level to error:
-如果你使用 AOT 编译器，可以使用 CLI 参数 `--missingTranslation` 来指定警告级别。下面的例子示范了如何把警告级别设置为 `error`：
+你可以在 Angular CLI 构建配置的 `configurations` 区指定警告级别。下面这个例子展示了如何把警告级别设置为 `error`：
-
- ng serve --aot --missingTranslation=error
-
+```
+"configurations": {
+ ...
+ "fr": {
+ ...
+ "i18nMissingTranslation": "error"
+ }
+}
+```
If you use the JIT compiler, specify the warning level in the compiler config at bootstrap by adding
the 'MissingTranslationStrategy' property. The example below shows how to set the warning level to
diff --git a/aio/content/guide/language-service.md b/aio/content/guide/language-service.md
index 4406f1298e..e039b22cf8 100644
--- a/aio/content/guide/language-service.md
+++ b/aio/content/guide/language-service.md
@@ -2,12 +2,12 @@
# Angular 语言服务
-The Angular Language Service is a way to get completions, errors,
-hints, and navigation inside your Angular templates whether they
-are external in an HTML file or embedded in annotations/decorators
-in a string. The Angular Language Service autodetects that you are
-opening an Angular file, reads your `tsconfig.json` file, finds all the
-templates you have in your application, and then provides language
+The Angular Language Service is a way to get completions, errors,
+hints, and navigation inside your Angular templates whether they
+are external in an HTML file or embedded in annotations/decorators
+in a string. The Angular Language Service autodetects that you are
+opening an Angular file, reads your `tsconfig.json` file, finds all the
+templates you have in your application, and then provides language
services for any templates that you open.
Angular 语言服务让你能在模板内获得自动完成、错误检查、给出提示和内部导航等功能，而不用管这些模板位于外部 HTML 文件中还是内嵌在注解/装饰器的字符串中。
@@ -17,9 +17,9 @@ Angular 语言服务会自动检测你要打开的文件（从你的 `tsconfig.j
## 自动完成
-Autocompletion can speed up your development time by providing you with
-contextual possibilities and hints as you type. This example shows
-autocomplete in an interpolation. As you type it out,
+Autocompletion can speed up your development time by providing you with
+contextual possibilities and hints as you type. This example shows
+autocomplete in an interpolation. As you type it out,
you can hit tab to complete.
自动完成可以在输入时为你提供当前情境下的候选内容和提示，从而提高开发速度。下面这个例子展示了插值表达式中的自动完成功能。当你进行输入的时候，就可以按 tab 键来自动完成。
@@ -28,8 +28,8 @@ you can hit tab to complete.
-There are also completions within
-elements. Any elements you have as a component selector will
+There are also completions within
+elements. Any elements you have as a component selector will
show up in the completion list.
还有对元素的自动完成。你定义的任何组件的选择器都会显示在自动完成列表中。
@@ -38,8 +38,8 @@ show up in the completion list.
## 错误检查
-The Angular Language Service can also forewarn you of mistakes in your code.
-In this example, Angular doesn't know what `orders` is or where it comes from.
+The Angular Language Service can also forewarn you of mistakes in your code.
+In this example, Angular doesn't know what `orders` is or where it comes from.
Angular 语言服务还能对代码中存在的错误进行预警。在这个例子中，Angular 不知道什么是 `orders` 或者它来自哪里。
@@ -51,8 +51,8 @@ Angular 语言服务还能对代码中存在的错误进行预警。在这个例
## 导航
-Navigation allows you to hover to
-see where a component, directive, module, etc. is from and then
+Navigation allows you to hover to
+see where a component, directive, module, etc. is from and then
click and press F12 to go directly to its definition.
导航可以让你在鼠标悬浮时看到某个组件、指令、模块等来自哪里，然后可以点击并按 F12 直接跳转到它的定义处。
@@ -65,8 +65,8 @@ click and press F12 to go directly to its definition.
## 编辑器中的 Angular 语言服务
-Angular Language Service is currently available for [Visual Studio Code](https://code.visualstudio.com/) and
-[WebStorm](https://www.jetbrains.com/webstorm).
+Angular Language Service is currently available for [Visual Studio Code](https://code.visualstudio.com/) and
+[WebStorm](https://www.jetbrains.com/webstorm).
Angular 语言服务目前在[Visual Studio Code](https://code.visualstudio.com/)和[WebStorm](https://www.jetbrains.com/webstorm)中都是可用的。
@@ -74,10 +74,10 @@ Angular 语言服务目前在[Visual Studio Code](https://code.visualstudio.com/
### Visual Studio Code 中
-In Visual Studio Code, install Angular Language Service from the store,
-which is accessible from the bottom icon on the left menu pane.
-You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it,
-enter the following command:
+In Visual Studio Code, install Angular Language Service from the store,
+which is accessible from the bottom icon on the left menu pane.
+You can also use the VS Quick Open (⌘+P) to search for the extension. When you've opened it,
+enter the following command:
Visual Studio Code 可以从商店中安装语言服务，这个功能就在左侧菜单面板最底下的那个图标。
你也可以使用 VS 的快速打开（⌘+P）功能来查找这个扩展插件。打开它之后就输入下列命令：
@@ -88,7 +88,7 @@ ext install Angular.ng-template
```
-Then click the install button to install the Angular Language Service.
+Then click the install button to install the Angular Language Service.
然后点击安装按钮来安装 Angular 语言服务。
@@ -96,39 +96,36 @@ Then click the install button to install the Angular Language Service.
### WebStorm 中
-In webstorm, you have to install the language service as a dev dependency.
-When Angular sees this dev dependency, it provides the
-language service inside of WebStorm. Webstorm then gives you
+In webstorm, you have to install the language service as a dev dependency.
+When Angular sees this dev dependency, it provides the
+language service inside of WebStorm. Webstorm then gives you
colorization inside the template and autocomplete in addition to the Angular Language Service.
在 WebStorm 中，你必须把语言服务安装为一个开发依赖。
当 Angular 看到这个开发依赖时，它就会在 WebStorm 中提供语言服务。除了 Angular 语言服务之外，WebStorm 还会为你提供模板中的代码高亮和自动完成功能。
-Here's the dev dependency
+Here's the dev dependency
you need to have in `package.json`:
下面这个开发依赖需要添加到 `package.json` 中：
```json
-
devDependencies {
- "@angular/language-service": "^4.0.0"
+ "@angular/language-service": "^6.0.0"
}
```
-Then in the terminal window at the root of your project,
-install the `devDependencies` with `npm` or `yarn`:
+Then in the terminal window at the root of your project,
+install the `devDependencies` with `npm` or `yarn`:
然后，打开终端窗口，在项目根目录下使用 `npm` 或 `yarn` 来安装这些 `devDependencies`：
```sh
-
npm install
-
```
-*OR*
+*OR*
*或*
@@ -138,7 +135,7 @@ yarn
```
-*OR*
+*OR*
*或*
@@ -152,7 +149,7 @@ yarn install
### Sublime Text 编辑器
-In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript.
+In [Sublime Text](https://www.sublimetext.com/), you first need an extension to allow Typescript.
Install the latest version of typescript in a local `node_modules` directory:
在[Sublime Text](https://www.sublimetext.com/)中，你首先需要一个扩展来支持 TypeScript。
@@ -174,7 +171,7 @@ npm install --save-dev @angular/language-service
```
-Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use.
+Starting with TypeScript 2.3, TypeScript has a language service plugin model that the language service can use.
从 TypeScript 2.3 开始，TypeScript 提供了一种插件模式的语言服务可以用。
@@ -192,7 +189,7 @@ Next, in your user preferences (`Cmd+,` or `Ctrl+,`), add:
## 安装到项目中
-You can also install Angular Language Service in your project with the
+You can also install Angular Language Service in your project with the
following `npm` command:
你还可以使用下列 `npm` 命令来把 Angular 语言服务安装到项目中：
@@ -203,7 +200,7 @@ npm install --save-dev @angular/language-service
```
-Additionally, add the following to the `"compilerOptions"` section of
+Additionally, add the following to the `"compilerOptions"` section of
your project's `tsconfig.json`.
另外，还要在项目的 `tsconfig.json` 中添加下列 `"compilerOptions"` 区域：
@@ -216,8 +213,8 @@ your project's `tsconfig.json`.
```
-Note that this only provides diagnostics and completions in `.ts`
-files. You need a custom sublime plugin (or modifications to the current plugin)
+Note that this only provides diagnostics and completions in `.ts`
+files. You need a custom sublime plugin (or modifications to the current plugin)
for completions in HTML files.
注意，这只是提供了 `.ts` 文件中的诊断与自动完成。你需要一个自定义的 sublime 插件（或修改现有插件）来在 HTML 文件中提供自动完成功能。
@@ -226,12 +223,12 @@ for completions in HTML files.
## 语言服务的工作原理
-When you use an editor with a language service, there's an
-editor process which starts a separate language process/service
-to which it speaks through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call).
-Any time you type inside of the editor, it sends information to the other process to
-track the state of your project. When you trigger a completion list within a template, the editor process first parses the template into an HTML AST, or [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree). Then the Angular compiler interprets
-what module the template is part of, the scope you're in, and the component selector. Then it figures out where in the template AST your cursor is. When it determines the
+When you use an editor with a language service, there's an
+editor process which starts a separate language process/service
+to which it speaks through an [RPC](https://en.wikipedia.org/wiki/Remote_procedure_call).
+Any time you type inside of the editor, it sends information to the other process to
+track the state of your project. When you trigger a completion list within a template, the editor process first parses the template into an HTML AST, or [abstract syntax tree](https://en.wikipedia.org/wiki/Abstract_syntax_tree). Then the Angular compiler interprets
+what module the template is part of, the scope you're in, and the component selector. Then it figures out where in the template AST your cursor is. When it determines the
context, it can then determine what the children can be.
当使用带有语言服务的编辑器时，就会有一个编辑器进程，它会启动一个独立的语言服务进程/服务，它们通过[RPC](https://en.wikipedia.org/wiki/Remote_procedure_call)彼此交谈。
@@ -243,7 +240,7 @@ It's a little more involved if you are in an interpolation. If you have an inter
如果是在插值表达式中，还会牵扯到更多东西。如果你在 `div` 元素中有一个插值表达式 `{{data.---}}`，并且需要在输入了 `data.` 之后提供自动完成列表，编译器就没办法使用 HTML AST 来找出答案了。
HTML AST 只能告诉编译器，有一些具有 "`{{data.---}}`" 特征的文本。也就是说模板解析器会生成表达式的 AST ，并且放在模板的 AST 中。Angular 语言服务然后在这个情境下查找 `data.---`，并向 TypeScript 语言服务询问这些数据都有哪些成员。然后 TypeScript 就会返回一个可能的列表。
-For more in-depth information, see the
+For more in-depth information, see the
[Angular Language Service API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
要了解更多更深入的信息，参见 [Angular 语言服务 API](https://github.com/angular/angular/blob/master/packages/language-service/src/types.ts)
@@ -254,7 +251,7 @@ For more in-depth information, see the
## 更多信息
-For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language
+For more information, see [Chuck Jazdzewski's presentation](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) on the Angular Language
Service from [ng-conf](https://www.ng-conf.org/) 2017.
要了解更多信息，参见 [ng-conf](https://www.ng-conf.org/) 2017 中 [Chuck Jazdzewski 的演讲](https://www.youtube.com/watch?v=ez3R0Gi4z5A&t=368s) 中讲解的 Angular 语言服务。
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index 92ec1e0f46..60dbe7da7c 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -530,7 +530,7 @@ The sequence of log messages follows the prescribed hook calling order:
`OnChanges`、`OnInit`、`DoCheck` (3x)、`AfterContentInit`、`AfterContentChecked` (3x)、
`AfterViewInit`、`AfterViewChecked` (3x)和 `OnDestroy`
-
+
The constructor isn't an Angular hook *per se*.
The log confirms that input properties (the `name` property in this case) have no assigned values at construction.
@@ -566,7 +566,7 @@ The heroes will never know they're being watched.
指令是一种完美的渗透方式，这些英雄们永远不会知道该指令的存在。
-
+
Kidding aside, pay attention to two key points:
@@ -651,7 +651,7 @@ Experienced developers agree that components should be cheap and safe to constru
有经验的开发者会认同组件的构建应该很便宜和安全。
-
+
Misko Hevery, Angular team lead,
[explains why](http://misko.hevery.com/code-reviewers-guide/flaw-constructor-does-real-work/)
@@ -683,7 +683,7 @@ They'll have been set when `ngOnInit()` runs.
如果你需要基于这些属性的值来初始化这个指令，这种情况就会出问题。
而当 `ngOnInit()` 执行的时候，这些属性都已经被正确的赋值过了。
-
+