diff --git a/aio/content/guide/attribute-directives.md b/aio/content/guide/attribute-directives.md
index 8e63d004b9..02578e33af 100644
--- a/aio/content/guide/attribute-directives.md
+++ b/aio/content/guide/attribute-directives.md
@@ -8,7 +8,7 @@ An **Attribute** directive changes the appearance or behavior of a DOM element.
Try the .
-你可以到这里试试:。
+你可以到这里试试:。
{@a directive-overview}
@@ -174,8 +174,12 @@ the element to which you applied `appHighlight`.
`ElementRef` grants direct access to the host DOM element
through its `nativeElement` property.
+`ElementRef` 通过其 `nativeElement` 属性给你了直接访问宿主 DOM 元素的能力。
+
This first implementation sets the background color of the host element to yellow.
+这里的第一个实现把宿主元素的背景色设置为了黄色。
+
{@a apply-directive}
## Apply the attribute directive
@@ -263,10 +267,13 @@ There are at least three problems with _that_ approach:
The handlers delegate to a helper method that sets the color on the host DOM element, `el`.
+这些处理器委托了一个辅助方法来为DOM元素(`el`)设置颜色。
+
The helper method, `highlight`, was extracted from the constructor.
The revised constructor simply declares the injected `el: ElementRef`.
-这些处理器委托给了一个辅助方法,它用于为DOM元素设置颜色,`el`就是你在构造器中声明和初始化过的。
+这个辅助方法(`highlight`)被从构造函数中提取了出来。
+修改后的构造函数只负责声明要注入的元素 `el: ElementRef`。
@@ -289,7 +296,7 @@ the mouse hovers over the `p` and disappears as it moves out.
## Pass values into the directive with an _@Input_ data binding
-## 使用数据绑定向指令传递值
+## 使用 `@Input` 数据绑定向指令传递值
Currently the highlight color is hard-coded _within_ the directive. That's inflexible.
In this section, you give the developer the power to set the highlight color while applying the directive.
@@ -617,13 +624,12 @@ Now apply that reasoning to the following example:
The template and its component trust each other.
The `color` property doesn't require the `@Input` decorator.
- `color`属性位于右侧的绑定表达式中,它属于模板所在的组件。
+ `color`属性位于右侧的绑定表达式中,它属于模板所在的组件。
该模板和组件相互信任。因此`color`不需要`@Input`装饰器。
* The `appHighlight` property on the left refers to an _aliased_ property of the `HighlightDirective`,
not a property of the template's component. There are trust issues.
Therefore, the directive property must carry the `@Input` decorator.
-
- `appHighlight`属性位于左侧,它引用了`HighlightDirective`中一个*带别名的*属性,它不是模板所属组件的一部分,因此存在信任问题。
+ `appHighlight`属性位于左侧,它引用了`HighlightDirective`中一个*带别名的*属性,它不是模板所属组件的一部分,因此存在信任问题。
所以,该属性必须带`@Input`装饰器。
diff --git a/aio/content/guide/component-interaction.md b/aio/content/guide/component-interaction.md
index d20bd329cf..5102fc8ea6 100644
--- a/aio/content/guide/component-interaction.md
+++ b/aio/content/guide/component-interaction.md
@@ -41,7 +41,7 @@ in which two or more components share information.
**See the **.
-**参见**。
+**参见**。
{@a parent-to-child}
diff --git a/aio/content/guide/component-styles.md b/aio/content/guide/component-styles.md
index c9dad49002..1431361269 100644
--- a/aio/content/guide/component-styles.md
+++ b/aio/content/guide/component-styles.md
@@ -316,6 +316,8 @@ They are _not inherited_ by any components nested within the template nor by any
The CLI creates an empty styles file for you by default and references that file in the component's generated `styleUrls`.
+CLI 会默认为你创建一个空白的样式表文件,并且在所生成组件的 `styleUrls` 中引用该文件。
+
ng generate component hero-app
@@ -352,8 +354,12 @@ You can also write `` tags into the component's HTML template.
The link tag's `href` URL must be relative to the
_**application root**_, not relative to the component file.
+link 标签的 `href` URL 必须是相对于***本应用的根路径***的,而不是相对于这个组件文件的。
+
When building with the CLI, be sure to include the linked style file among the assets to be copied to the server as described in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-asset-configuration).
+当使用 CLI 进行构建时,要确保这个链接到的样式表文件被复制到了服务器上。参见 [CLI 官方文档](https://github.com/angular/angular-cli/wiki/stories-asset-configuration)。
+
### CSS @imports
@@ -377,17 +383,29 @@ In this case, the URL is relative to the CSS file into which you're importing.
### External and global style files
+### 外部以及全局样式文件
+
When building with the CLI, you must configure the `.angular-cli.json` to include _all external assets_, including external style files.
+当使用 CLI 进行构建时,你必须配置 `.angular-cli.json` 文件,使其包含*所有外部资源*(包括外部的样式表文件)。
+
Register **global** style files in the `styles` section which, by default, is pre-configured with the global `styles.css` file.
+在它的 `styles` 区注册这些**全局**样式文件,默认情况下,它会有一个预先配置的全局 `styles.css` 文件。
+
See the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-global-styles) to learn more.
+要了解更多,参见 [CLI 官方文档](https://github.com/angular/angular-cli/wiki/stories-global-styles)。
+
### Non-CSS style files
+### 非 CSS 样式文件
+
If you're building with the CLI,
you can write style files in [sass](http://sass-lang.com/), [less](http://lesscss.org/), or [stylus](http://stylus-lang.com/) and specify those files in the `@Component.styleUrls` metadata with the appropriate extensions (`.scss`, `.less`, `.styl`) as in the following example:
+如果使用 CLI 进行构建,那么你可以用 [sass](http://sass-lang.com/)、[less](http://lesscss.org/) 或 [stylus](http://stylus-lang.com/) 来编写样式,并使用相应的扩展名(`.scss`、`.less`、`.styl`)把它们指定到 `@Component.styleUrls` 元数据中。例子如下:
+
@Component({
@@ -401,15 +419,23 @@ you can write style files in [sass](http://sass-lang.com/), [less](http://lesscs
The CLI build process runs the pertinent CSS preprocessor.
+CLI 的构建过程会运行相关的预处理器。
+
When generating a component file with `ng generate component`, the CLI emits an empty CSS styles file (`.css`) by default.
You can configure the CLI to default to your preferred CSS preprocessor
as explained in the [CLI documentation](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
"CSS Preprocessor integration").
+当使用 `ng generate component` 命令生成组件文件时,CLI 会默认生成一个空白的 CSS 样式文件(`.css`)。
+你可以配置 CLI,让它默认使用你喜欢的 CSS 预处理器,参见 [CLI 官方文档](https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
+ "CSS Preprocessor integration") 中的解释。
+
Style strings added to the `@Component.styles` array _must be written in CSS_ because the CLI cannot apply a preprocessor to inline styles.
+添加到 `@Component.styles` 数组中的字符串*必须写成 CSS*,因为 CLI 没法对这些内联的样式使用任何 CSS 预处理器。
+
{@a view-encapsulation}
diff --git a/aio/content/guide/dynamic-component-loader.md b/aio/content/guide/dynamic-component-loader.md
index 3dae7788c1..a0baa6eb80 100644
--- a/aio/content/guide/dynamic-component-loader.md
+++ b/aio/content/guide/dynamic-component-loader.md
@@ -264,5 +264,4 @@ Here are two sample components and the `AdComponent` interface for reference:
See the .
-
-参见。
+参见。
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index bdde6b89ce..958ab4f910 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -2488,7 +2488,7 @@ So you flatten the `Observable` with the `switchMap` operator instead.
The `switchMap` operator also cancels previous in-flight requests. If the user re-navigates to this route
with a new `id` while the `HeroService` is still retrieving the old `id`, `switchMap` discards that old request and returns the hero for the new `id`.
-`switchMap`操作符也会取消以前未完成的在途请求。如果用户使用心得`id`再次导航到该路由,而`HeroService`仍在接受老`id`对应的英雄,那么`switchMap`就会抛弃老的请求,并返回这个新`id`的英雄信息。
+`switchMap`操作符也会取消以前未完成的在途请求。如果用户使用新的`id`再次导航到该路由,而`HeroService`仍在接受老`id`对应的英雄,那么`switchMap`就会抛弃老的请求,并返回这个新`id`的英雄信息。
The observable `Subscription` will be handled by the `AsyncPipe` and the component's `hero` property will be (re)set with the retrieved hero.
@@ -4432,14 +4432,14 @@ The same rule applies for feature modules loaded [asynchronously](#asynchronous-
### _CanActivateChild_: guarding child routes
-### `CanAcitvateChild`:保护子路由
+### `CanActivateChild`:保护子路由
You can also protect child routes with the `CanActivateChild` guard.
The `CanActivateChild` guard is similar to the `CanActivate` guard.
The key difference is that it runs _before_ any child route is activated.
我们还可以使用`CanActivateChild`守卫来保护子路由。
-`CanActivateChild`守卫和`CanAcitvate`守卫很像。
+`CanActivateChild`守卫和`CanActivate`守卫很像。
它们的区别在于,`CanActivateChild`会在*任何子路由*被激活之前运行。
You protected the admin feature module from unauthorized access.
@@ -4459,8 +4459,8 @@ The `canActivateChild()` method can return an `Observable` or `Promise<
async checks and a `boolean` for sync checks.
This one returns a `boolean`:
-接下来,实现`CanAcitvateChild`方法,它所接收的参数与`CanAcitvate`方法一样:一个`ActivatedRouteSnapshot`和一个`RouterStateSnapshot`。
-`CanAcitvateChild`方法可以返回`Observable`或`Promise`来支持异步检查,或`boolean`来支持同步检查。
+接下来,实现`CanActivateChild`方法,它所接收的参数与`CanActivate`方法一样:一个`ActivatedRouteSnapshot`和一个`RouterStateSnapshot`。
+`CanActivateChild`方法可以返回`Observable`或`Promise`来支持异步检查,或`boolean`来支持同步检查。
这里返回的是`boolean`:
@@ -5059,7 +5059,7 @@ You're already protecting the `AdminModule` with a `CanActivate` guard that prev
accessing the admin feature area.
It redirects to the login page if the user is not authorized.
-我们已经使用`CanAcitvate`保护`AdminModule`了,它会阻止未授权用户访问管理特性区。如果用户未登录,它就会跳转到登录页。
+我们已经使用`CanActivate`保护`AdminModule`了,它会阻止未授权用户访问管理特性区。如果用户未登录,它就会跳转到登录页。
But the router is still loading the `AdminModule` even if the user can't visit any of its components.
Ideally, you'd only load the `AdminModule` if the user is logged in.
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index ac2f5c5486..6d3dc296cb 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -788,38 +788,38 @@ For example, when the browser renders ``, it crea
corresponding DOM node with a `value` property *initialized* to "Bob".
例如,当浏览器渲染``时,它将创建相应 DOM 节点,
-其`value` property 被*初始化为* “Bob”。
+它的 `value` 这个 property 被*初始化为* “Bob”。
When the user enters "Sally" into the input box, the DOM element `value` *property* becomes "Sally".
But the HTML `value` *attribute* remains unchanged as you discover if you ask the input element
about that attribute: `input.getAttribute('value')` returns "Bob".
-当用户在输入框中输入 “Sally” 时,DOM 元素的`value` *property* 变成了 “Sally”。
-但是这个 HTML `value` *attribute* 保持不变。如果我们读取 input 元素的 attribute,就会发现确实没变:
+当用户在输入框中输入 “Sally” 时,DOM 元素的 `value` 这个 *property* 变成了 “Sally”。
+但是该 HTML 的 `value` 这个 *attribute* 保持不变。如果我们读取 input 元素的 attribute,就会发现确实没变:
`input.getAttribute('value') // 返回 "Bob"`。
The HTML attribute `value` specifies the *initial* value; the DOM `value` property is the *current* value.
-HTML attribute `value`指定了*初始*值;DOM `value` property 是*当前*值。
+HTML 的 `value` 这个 attribute 指定了*初始*值;DOM 的 `value` 这个 property 是*当前*值。
The `disabled` attribute is another peculiar example. A button's `disabled` *property* is
`false` by default so the button is enabled.
When you add the `disabled` *attribute*, its presence alone initializes the button's `disabled` *property* to `true`
so the button is disabled.
-`disabled` attribute 是另一个古怪的例子。按钮的`disabled` *property* 是`false`,因为默认情况下按钮是可用的。
-当我们添加`disabled` *attribute* 时,只要它出现了按钮的`disabled` *property* 就初始化为`true`,于是按钮就被禁用了。
+`disabled` 这个 attribute 是另一种特例。按钮的`disabled` 这个 *property* 是`false`,因为默认情况下按钮是可用的。
+当我们添加`disabled` 这个 *attribute* 时,只要它出现了按钮的`disabled` 这个 *property* 就初始化为`true`,于是按钮就被禁用了。
Adding and removing the `disabled` *attribute* disables and enables the button. The value of the *attribute* is irrelevant,
which is why you cannot enable a button by writing ``.
-添加或删除`disabled` *attribute*会禁用或启用这个按钮。但 *attribute* 的值无关紧要,这就是我们为什么没法通过
+添加或删除`disabled` 这个 *attribute*会禁用或启用这个按钮。但 *attribute* 的值无关紧要,这就是我们为什么没法通过
``这种写法来启用按钮。
Setting the button's `disabled` *property* (say, with an Angular binding) disables or enables the button.
The value of the *property* matters.
-设置按钮的`disabled` *property*(如,通过 Angular 绑定)可以禁用或启用这个按钮。
+设置按钮的`disabled` 这个 *property*(如,通过 Angular 绑定)可以禁用或启用这个按钮。
这就是 *property* 的价值。
**The HTML attribute and the DOM property are not the same thing, even when they have the same name.**
@@ -1511,8 +1511,6 @@ Here's how the table renders:
One-Two
- 1-2列
-
@@ -1523,16 +1521,12 @@ Here's how the table renders:
Five
- 五列
-
Six
- 六列
-
@@ -2920,27 +2914,44 @@ The `iconUrl` and `onSave` are members of the `AppComponent` class.
They are _not_ decorated with `@Input()` or `@Output`.
Angular does not object.
+`iconUrl` 和 `onSave` 是 `AppComponent` 类的成员。但它们并没有带 `@Input()` 或 `@Output()` 装饰器。
+Angular 不在乎。
+
**You can always bind to a public property of a component in its own template.**
It doesn't have to be an _Input_ or _Output_ property
+**你总是可以在组件自己的模板中绑定到组件的公共属性,**而不用管它们是否输入(Input)属性或输出(Output)属性。
+
A component's class and template are closely coupled.
They are both parts of the same thing.
Together they _are_ the component.
Exchanges between a component class and its template are internal implementation details.
+这是因为组件类和模板是紧耦合的,它们是同一个东西的两个部分,合起来构成组件。
+组件类及其模板之间的交互属于实现细节。
+
### Binding to a different component
+### 绑定到其它组件
+
You can also bind to a property of a _different_ component.
In such bindings, the _other_ component's property is to the _left_ of the (`=`).
+你也可以绑定到*其它*组件的属性。
+这种绑定形式下,*其它*组件的属性位于等号(`=`)的*左侧*。
+
In the following example, the `AppComponent` template binds `AppComponent` class members to properties of the `HeroDetailComponent` whose selector is `'app-hero-detail'`.
+下面的例子中,`AppComponent` 的模板把 `AppComponent` 类的成员绑定到了 `HeroDetailComponent`(选择器为`'app-hero-detail'`) 的属性上。
+
The Angular compiler _may_ reject these bindings with errors like this one:
+Angular 的编译器*可能*会对这些绑定报错,就像这样:
+
Uncaught Error: Template parse errors:
@@ -2951,42 +2962,71 @@ Can't bind to 'hero' since it isn't a known property of 'app-hero-detail'
You know that `HeroDetailComponent` has `hero` and `deleteRequest` properties.
But the Angular compiler refuses to recognize them.
+你自己知道 `HeroDetailComponent` 有两个属性 `hero` 和 `detectRequest`,但 Angular 编译器并不知道。
+
**The Angular compiler won't bind to properties of a different component
unless they are Input or Output properties**.
+**Angular 编译器不会绑定到其它组件的属性上 —— 除非这些属性是输入或输出属性。**
+
There's a good reason for this rule.
+这条规则是有充分理由的。
+
It's OK for a component to bind to its _own_ properties.
The component author is in complete control of those bindings.
+组件绑定到它*自己*的属性当然没问题。
+该组件的作者对这些绑定有完全的控制权。
+
But other components shouldn't have that kind of unrestricted access.
You'd have a hard time supporting your component if anyone could bind to any of its properties.
Outside components should only be able to bind to the component's public binding API.
+但是,其它组件不应该进行这种毫无限制的访问。
+如果任何人都可以绑定到你的组件的任何属性上,那么这个组件就很难维护。
+所以,外部组件应该只能绑定到组件的公共(允许绑定) API 上。
+
Angular asks you to be _explicit_ about that API.
It's up to _you_ to decide which properties are available for binding by
external components.
+Angular 要求你*显式声明*那些 API。
+它让*你*可以自己决定哪些属性是可以被外部组件绑定的。
+
#### TypeScript _public_ doesn't matter
+#### TypeScript 的 `public` 是没用的
+
You can't use the TypeScript _public_ and _private_ access modifiers to
shape the component's public binding API.
+你不能用 TypeScript 的 `public` 和 `private` 访问控制符来标明组件的公共 API。
+
All data bound properties must be TypeScript _public_ properties.
Angular never binds to a TypeScript _private_ property.
+所有数据绑定属性必须是 TypeScript 的公共属性,Angular 永远不会绑定到 TypeScript 中的私有属性。
+
Angular requires some other way to identify properties that _outside_ components are allowed to bind to.
That _other way_ is the `@Input()` and `@Output()` decorators.
+因此,Angular 需要一些其它方式来标记出那些允许被*外部*组件绑定到的属性。
+这种*其它方式*,就是 `@Input()` 和 `@Output()` 装饰器。
+
### Declaring Input and Output properties
+### 声明输入与输出属性
+
In the sample for this guide, the bindings to `HeroDetailComponent` do not fail
because the data bound properties are annotated with `@Input()` and `@Output()` decorators.
+在本章的例子中,绑定到 `HeroDetailComponent` 不会失败,这是因为这些要进行数据绑定的属性都带有 `@Input()` 和 `@Output()` 装饰器。
+
@@ -3356,10 +3396,14 @@ You'll need this template operator when you turn on strict null checks. It's opt
## The `$any` type cast function (`$any( )`)
+## 类型转换函数 `$any` ($any( <表达式> ))
+
Sometimes a binding expression will be reported as a type error and it is not possible or difficult
to fully specify the type. To silence the error, you can use the `$any` cast function to cast
the expression to [the `any` type](http://www.typescriptlang.org/docs/handbook/basic-types.html#any).
+有时候,绑定表达式可能会报类型错误,并且它不能或很难指定类型。要消除这种报错,你可以使用 `$any` 转换函数来把表达式转换成 [`any` 类型](http://www.typescriptlang.org/docs/handbook/basic-types.html#any)。
+
@@ -3368,15 +3412,21 @@ In this example, when the Angular compiler turns your template into TypeScript c
it prevents TypeScript from reporting that `marker` is not a member of the `Hero`
interface.
+在这个例子中,当 Angular 编译器把模板转换成 TypeScript 代码时,`$any` 表达式可以防止 TypeScript 编译器报错说 `marker` 不是 `Hero` 接口的成员。
+
The `$any` cast function can be used in conjunction with `this` to allow access to undeclared members of
the component.
+`$any` 转换函数可以和 `this` 联合使用,以便访问组件中未声明过的成员。
+
The `$any` cast function can be used anywhere in a binding expression where a method call is valid.
+`$any` 转换函数可以在绑定表达式中任何可以进行方法调用的地方使用。
+
## Summary
## 小结
diff --git a/aio/content/translations/cn/about.md b/aio/content/translations/cn/about.md
index fc37d99e7c..d3b52d147c 100644
--- a/aio/content/translations/cn/about.md
+++ b/aio/content/translations/cn/about.md
@@ -86,6 +86,12 @@ Angular 和 Grails 开发高校[教务管理系统](http://www.github.com/jwgl)
- OuYancey(来自Github)
- GenweiWu(来自Github)
- dxyqqs(来自Github)
+- wkylin(来自Github)
+- rthel(来自Github)
+- nickChenyx(来自Github)
+- HNUHell(来自Github)
+- SkyStardust(来自Github)
+- Eve(来自Github)
- 另外还有一些做好事不留名的活雷锋
想让你的名字也出现在这里吗?请提供[反馈、纠错](https://github.com/angular/angular-cn/issues)。
diff --git a/aio/content/tutorial/toh-pt6.md b/aio/content/tutorial/toh-pt6.md
index 6c5e841cad..895b1a8586 100644
--- a/aio/content/tutorial/toh-pt6.md
+++ b/aio/content/tutorial/toh-pt6.md
@@ -88,7 +88,7 @@ If you're _coding along_ with this tutorial, stay here and add the *In-memory We
Install the *In-memory Web API* package from _npm_
-从 `npm` 中安装这个*内存 Web API* 包
+从 `npm` 中安装这个*内存 Web API* 包(译注:请使用 0.5+ 的版本,不要使用 0.4-)