diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade
index d6dc40134b..44b15d6881 100644
--- a/public/docs/ts/latest/guide/template-syntax.jade
+++ b/public/docs/ts/latest/guide/template-syntax.jade
@@ -9,66 +9,109 @@ block includes
 :marked
   Our Angular application manages what the user sees and can do, achieving this through the interaction of a Component class instance (the *component*) and its user-facing template.
 
-  我们的Angular应用管理着用户之所见和所为，并通过Component类的实例(*component*)和面向用户的模板来与用户交互。
+  Angular 应用管理着用户之所见和所为，并通过 Component 类的实例（*组件*）和面向用户的模板来与用户交互。
 
   Many of us are familiar with the component/template duality from our experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular,  the component plays the part of the controller/viewmodel, and the template represents the view.
 
-  从使用模型-视图-控制器(MVC)或模型-视图-视图模型(MVVM)的经验中，很多用户都熟悉了组件/模板这两个概念。
-  在Angular中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
+  从使用模型-视图-控制器 (MVC) 或模型-视图-视图模型 (MVVM) 的经验中，很多开发人员都熟悉了组件和模板这两个概念。
+  在 Angular 中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
 
   Let’s find out what it takes to write a template for our view. We’ll cover these basic elements of template syntax:
 
-  我们来看看写视图的模板都需要什么。我们将覆盖模板语法中的下列基本元素：
+  来看看写视图的模板都需要什么。本章将覆盖模板语法中的下列基本元素：
 
   * [HTML](#html)
-  * [HTML](#html)
+
+    [HTML](#html)
+
   * [Interpolation](#interpolation)
-  * [插值表达式](#interpolation)
+
+    [插值表达式](#interpolation)
+
   * [Template expressions](#template-expressions)
-  * [模板表达式](#template-expressions)
+
+    [模板表达式](#template-expressions)
+
   * [Template statements](#template-statements)
-  * [模板语句](#template-statements)
+
+    [模板语句](#template-statements)
+
   * [Binding syntax](#binding-syntax)
-  * [绑定语法](#binding-syntax)
+
+    [绑定语法](#binding-syntax)
+
   * [Property binding](#property-binding)
-  * [属性绑定](#property-binding)
+
+    [属性 (property) 绑定](#property-binding)
+
   * [Attribute, class, and style bindings](#other-bindings)
-  * [HTML属性、class和style绑定](#other-bindings)
+
+    [attribute、class 和 style 绑定](#other-bindings)
+
   * [Event binding](#event-binding)
-  * [事件绑定](#event-binding)
+
+    [事件绑定](#event-binding)
+
   * [Two-way data binding](#two-way)
-  * [双向数据绑定](#two-way)
+
+    [双向数据绑定](#two-way)
+
   * [Two-way data binding with `NgModel`](#ngModel)
-  * [使用`NgModel`进行双向数据绑定](#ngModel)
+
+    [使用`NgModel`进行双向数据绑定](#ngModel)
+
   * [Built-in directives](#directives)
-  * [内置指令](#directives)
-    * [NgClass](#ngClass)
+
+    [内置指令](#directives)
+
     * [NgClass](#ngClass)
+
+      [NgClass](#ngClass)
+
     * [NgStyle](#ngStyle)
-    * [NgStyle](#ngStyle)
-    * [NgIf](#ngIf)
+
+      [NgStyle](#ngStyle)
+
     * [NgIf](#ngIf)
+
+      [NgIf](#ngIf)
+
     * [NgSwitch](#ngSwitch)
-    * [NgSwitch](#ngSwitch)
-    * [NgFor](#ngFor)
+
+      [NgSwitch](#ngSwitch)
+
     * [NgFor](#ngFor)
+
+      [NgFor](#ngFor)
+
   * [* and <template>](#star-template)
-  * [* 与 <template>](#star-template)
+
+    [* 与 <template>](#star-template)
+
   * [Template reference variables](#ref-vars)
-  * [模板引用变量](#ref-vars)
+
+    [模板引用变量](#ref-vars)
+
   * [Input and output properties](#inputs-outputs)
-  * [输入输出属性](#inputs-outputs)
+
+    [输入输出属性](#inputs-outputs)
+
   * [Template expression operators](#expression-operators)
-  * [模板表达式操作符](#expression-operators)
+
+    [模板表达式操作符](#expression-operators)
+
     * [pipe](#pipe)
-    * [管道](#pipe)
+
+      [管道](#pipe)
+
     * [safe navigation operator (?.)](#safe-navigation-operator)
-    * [“安全导航操作符”(?.)](#safe-navigation-operator)
+
+      [安全导航操作符 (?.)](#safe-navigation-operator)
 
   The <live-example></live-example>
   demonstrates all of the syntax and code snippets described in this chapter.
 p.
-  这个<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。
+  <live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。
 
 .l-main-section
 :marked
@@ -78,7 +121,7 @@ p.
 
   HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application has a template that is pure HTML:
 
-  HTML是Angular模板的“语言”。我们的[“快速起步”](../quickstart.html)应用就有一个模板是纯HTML的：
+  HTML 是 Angular 模板的语言。[“快速起步”](../quickstart.html)应用的模板是纯 HTML 的：
 
 code-example(language="html" escape="html").
   <h1>My First Angular App</h1>
@@ -86,32 +129,34 @@ code-example(language="html" escape="html").
 :marked
   Almost all HTML syntax is valid template syntax. The `<script>` element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. (In practice, `<script>` is simply ignored.)
 
-  几乎所有的HTML语法都是有效的模板语法。但值得注意的例外是`<script>`元素，它被禁用了，以阻止脚本注入攻击的风险。(实际上，`<script>`只是被忽略了。)
+  几乎所有的 HTML 语法都是有效的模板语法。但值得注意的例外是`<script>`元素，它被禁用了，以阻止脚本注入攻击的风险。（实际上，`<script>`只是被忽略了。）
 
   Some legal HTML doesn’t make much sense in a template. The `<html>`, `<body>`, and `<base>` elements have no useful role in our repertoire. Pretty much everything else is fair game.
 
-  有些合法的HTML被用在一个模板中是没有意义的。`<html>`、`<body>`和`<base>`元素在我们的舞台上中并没有扮演有用的角色。基本上所有其它的元素都被一样使用。
+  有些合法的 HTML 被用在模板中是没有意义的。`<html>`、`<body>`和`<base>`元素这个舞台上中并没有扮演有用的角色。基本上所有其它的元素都被一样使用。
 
   We can extend the HTML vocabulary of our templates with components and directives that appear as new elements and attributes. In the following sections we are going to learn how to get and set DOM (Document Object Model) values dynamically through data binding.
 
-  我们可以通过组件和指令来扩展模板中的HTML词汇。它们看上去就是新元素和属性。接下来我们将学习如何通过数据绑定来动态获取/设置DOM（文档对象模型）的值。
+  可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM（文档对象模型）的值。
 
   Let’s turn to the first form of data binding &mdash; interpolation &mdash; to see how much richer template HTML can be.
 
-  我们拿数据绑定的第一种形式 —— 插值表达式 —— 来看看模板的HTML可以有多丰富。
+  数据绑定的第一种形式 —— 插值表达式 —— 展示了模板的 HTML 可以有多丰富。
 
 .l-main-section
 :marked
   ## Interpolation
+
   ## 插值表达式
+
   We met the double-curly braces of interpolation, `{{` and `}}`, early in our Angular education.
 
-  在以前的Angular教程中，我们遇到过由双花括号括起来的插值表达式，`{{`和`}}`。
+  在以前的 Angular 教程中，我们遇到过由双花括号括起来的插值表达式，`{{`和`}}`。
 +makeExample('template-syntax/ts/app/app.component.html', 'first-interpolation')(format=".")
 :marked
   We use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
 
-  我们使用插值表达式来把计算所得的字符串插入成HTML元素标签内的文本或对标签的属性进行赋值。
+  插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值。
 
 +makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".")
 :marked
@@ -119,24 +164,26 @@ code-example(language="html" escape="html").
   string value of the corresponding component property. In the example above, Angular evaluates the `title` and `heroImageUrl` properties
   and "fills in the blanks", first displaying a bold application title and then a heroic image.
 
-  在括号之间的“素材”，通常是组件属性的名字。Angular会用组件中同名属性的字符串值，替换这个名字。
-  在这个例子中，Angular计算`title`和`heroImageUrl`属性的值，并把它们填在空白处。首先显示一个粗体的应用标题，然后显示英雄的图片。
+  在括号之间的“素材”，通常是组件属性的名字。Angular 会用组件中相应属性的字符串值，替换这个名字。
+  上例中，Angular 计算`title`和`heroImageUrl`属性的值，并把它们填在空白处。
+  首先显示粗体的应用标题，然后显示英雄的图片。
 
   More generally, the material between the braces is a **template expression** that Angular first **evaluates**
   and then **converts to a string**. The following interpolation illustrates the point by adding the two numbers within braces:
 
-  更一般化的说法是：括号间的素材是一个**模板表达式**，Angular首先**对它求值**然后把它**转换成字符串**。下列插值表达式通过把括号中的两个数字相加说明了这一点：
+  一般来说，括号间的素材是一个**模板表达式**，Angular 先**对它求值**，再把它**转换成字符串**。
+  下列插值表达式通过把括号中的两个数字相加说明了这一点：
 +makeExample('template-syntax/ts/app/app.component.html', 'sum-1')(format=".")
 :marked
   The expression can invoke methods of the host component, as we do here with `getVal()`:
 
-  这个表达式可以调用所属组件的方法，就像下面用的`getVal()`：
+  这个表达式可以调用宿主组件的方法，就像下面用的`getVal()`：
 +makeExample('template-syntax/ts/app/app.component.html', 'sum-2')(format=".")
 :marked
   Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally,
   it assigns this composite interpolated result to an **element or directive property**.
 
-  Angular对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，它把这个组合出来的插值结果赋给一个**元素或指令的属性**。
+  Angular 对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，把这个组合出来的插值结果赋给**元素或指令的属性**。
 
   We appear to be inserting the result between element tags and assigning it to attributes.
   It's convenient to think so, and we rarely suffer for this mistake.
@@ -144,63 +191,75 @@ code-example(language="html" escape="html").
   [property binding](#property-binding), and is explained below.
 
   表面上看，我们在元素标签之间插入了结果和对标签的属性进行了赋值。
-  这样思考起来很方便，并且这个错误很少给我们带来麻烦。
-  但严格来讲，这是不对的。插值表达式是一个特殊的语法，Angular把它转换成了一个[属性绑定](#property-binding)，我们后面将会解释这一点。
+  这样思考起来很方便，并且这个误解很少给我们带来麻烦。
+  但严格来讲，这是不对的。插值表达式是一个特殊的语法，Angular 把它转换成了[属性绑定](#property-binding)，后面将会解释这一点。
 
   But first, let's take a closer look at template expressions and statements.
 
-  但是，让我们先仔细审视下模板表达式和模板语句。
+  讲解属性绑定之前，先深入了解一下模板表达式和模板语句。
 
 <a id="template-expressions"></a>
 .l-main-section
 :marked
   ## Template expressions
+
   ## 模板表达式
+
   A template **expression** produces a value.
   Angular executes the expression and assigns it to a property of a binding target;
   the target might be an HTML element, a component, or a directive.
 
   模板**表达式**产生一个值。
-  Angular执行这个表达式，并且把它赋值给绑定目标的一个属性，这个绑定目标可能是一个HTML元素、一个组件或一个指令。
+  Angular 执行这个表达式，并把它赋值给绑定目标的属性，这个绑定目标可能是 HTML 元素、组件或指令。
 
   We put a template expression within the interpolation braces when we wrote `{{1 + 1}}`.
   We’ll see template expressions again in the [property binding](#property-binding) section,
   appearing in quotes to the right of the `=` symbol as in `[property]="expression"`.
 
-  当我们写`{{1 + 1}}`时，我们往插值表达式的括号中放进了一个模板表达式。
-  我们会在[属性绑定](#property-binding)中再次看到模板表达式，它出现在`=`右侧的引号中，看起来像这样：`[property]="expression"`。
+  当我们写`{{1 + 1}}`时，是往插值表达式的括号中放进了一个模板表达式。
+  在[属性绑定](#property-binding)中会再次看到模板表达式，它出现在`=`右侧的引号中，看起来像这样：`[property]="expression"`。
 
   We write template expressions in a language that looks like #{_JavaScript}.
   Many #{_JavaScript} expressions are legal template expressions, but not all.
 
-  我们用来写模板表达式的是一种看起来很像JavaScript的语言。
-  很多JavaScript表达式也是合法的模板表达式，但不是全部。
+  编写模板表达式所用的语言看起来很像 JavaScript。
+  很多 JavaScript 表达式也是合法的模板表达式，但不是全部。
 
   #{_JavaScript} expressions that have or promote side effects are prohibited,
   including:
 
-  JavaScript中那些具有或可能引发副作用的表达式是被禁止的，包括：
+  JavaScript 中那些具有或可能引发副作用的表达式是被禁止的，包括：
 
   * assignments (`=`, `+=`, `-=`, ...)
-  * 赋值 (`=`, `+=`, `-=`, ...)
+
+    赋值 (`=`, `+=`, `-=`, ...)
+
   * !{__new_op}
-  * `new`运算符
+
+    `new`运算符
+
   * chaining expressions with !{__chaining_op}
-  * 使用`;`或`,`的链式表达式
+
+    使用`;`或`,`的链式表达式
+
   * increment and decrement operators (`++` and `--`)
-  * 自增或自减操作符(`++`和`--`)
+
+    自增或自减操作符 (`++`和`--`)
 
 :marked
   Other notable differences from #{_JavaScript} syntax include:
 
-  和JavaScript语法的其它显著不同包括：
+  和 JavaScript语 法的其它显著不同包括：
 
 block notable-differences
   :marked
     * no support for the bitwise operators `|` and `&`
-    * 不支持位运算 `|` 和 `&`
+
+      不支持位运算`|`和`&`
+
     * new [template expression operators](#expression-operators), such as `|` and `?.`
-    * 具有新的 [模板表达式运算符](#expression-operators)，比如`|`和`?.`
+
+      具有新的[模板表达式运算符](#expression-operators)，比如`|`和`?.`
 
 h3#expression-context Expression context
 
@@ -213,57 +272,69 @@ block template-expressions-cannot
     can’t call `console.log` or `Math.max`. They are restricted to referencing
     members of the expression context.
 
-    也许更让人吃惊的是，模板表达式不能引用全局命名空间中的任何东西。它们不能引用<code>window</code>或<code>document</code>。
-    它们不能调用<code>console.log</code>或<code>Math.max</code>。它们被局限于只能访问来自表达式上下文中的成员。
+    也许更让人吃惊的是，模板表达式不能引用全局命名空间中的任何东西。
+    不能引用`window`或`document`。不能调用`console.log`或`Math.max`。
+    它们被局限于只能访问来自表达式上下文中的成员。
 
 :marked
   The *expression context* is typically the **component instance**, which is
   the source of binding values.
 
-  典型的*表达式上下文*就是**这个组件的实例**，它是各种绑定值的来源。
+  典型的*表达式上下文*就是这个**组件实例**，它是各种绑定值的来源。
 
   When we see *title* wrapped in double-curly braces, `{{title}}`,
   we know that `title` is a property of the data-bound component.
   When we see *isUnchanged* in `[disabled]="isUnchanged"`,
   we know we are referring to that component's `isUnchanged` property.
 
-  当看到包裹在双花括号中的*title*(<code>{{title}}</code>)时，我们就知道`title`是这个数据绑定组件中的一个属性。
-  当看到`[disabled]="isUnchanged"`中的*isUnchanged*时，我们就知道我们正在引用该组件的`isUnchanged`属性。
+  当看到包裹在双花括号中的 *title* (`{{title}}`) 时，我们就知道`title`是这个数据绑定组件中的一个属性。
+  当看到`[disabled]="isUnchanged"`中的 *isUnchanged* 时，我们就知道正在引用该组件的`isUnchanged`属性。
 
   The component itself is usually the expression *context*, in which case
   the template expression usually references that component.
 
-  组件本身通常就是表达式的*上下文*，这种情况下，模板表达式通常会引用那个组件。
+  通常，组件本身就是表达式的*上下文*，这种情况下，模板表达式会引用那个组件。
 
   The expression context can include objects other than the component.
   A [template reference variable](#ref-vars) is one such alternative context object.
 
-  表达式的上下文也包括组件之外的对象。
+  表达式的上下文可以包括组件之外的对象。
   [模板引用变量](#ref-vars)就是备选的上下文对象之一。
 
 :marked
   <a id="no-side-effects"></a>
+
   ### Expression guidelines
+
   ### 表达式指南
+
   Template expressions can make or break an application.
   Please follow these guidelines:
 
   模板表达式能成就或毁掉一个应用。请遵循下列指南：
 
   * [No visible side effects](#no-visible-side-effects)
-  * [没有可见的副作用](#no-visible-side-effects)
+
+    [没有可见的副作用](#no-visible-side-effects)
+
   * [Quick execution](#quick-execution)
-  * [执行迅速](#quick-execution)
+
+    [执行迅速](#quick-execution)
+
   * [Simplicity](#simplicity)
-  * [非常简单](#simplicity)
+
+    [非常简单](#simplicity)
+
   * [Idempotence](#idempotence)
-  * [幂等性](#idempotence)
+
+    [幂等性](#idempotence)
 
   The only exceptions to these guidelines should be in specific circumstances that you thoroughly understand.
 
   超出上面指南外的情况应该只出现在那些你确信自己已经彻底理解的特定场景中。
 
   #### No visible side effects
+
   #### 没有可见的副作用
 
   A template expression should not change any application state other than the value of the
@@ -275,117 +346,136 @@ block template-expressions-cannot
   We should never worry that reading a component value might change some other displayed value.
   The view should be stable throughout a single rendering pass.
 
-  这条规则是Angular“单向数据流”策略的基础。
-  我们永远不应该担心读取一个组件值可能改变另外的显示值。
+  这条规则是 Angular “单向数据流”策略的基础。
+  永远不用担心读取组件值可能改变另外的显示值。
   在一次单独的渲染过程中，视图应该总是稳定的。
 
   #### Quick execution
+
   #### 执行迅速
+
   Angular executes template expressions more often than we think.
   They can be called after every keypress or mouse move.
   Expressions should finish quickly or the user experience may drag, especially on slower devices.
   Consider caching values computed from other values when the computation is expensive.
 
-  Angular执行模板表达式比我们想象的频繁。
-  它们可能在每一次按键或鼠标移动后被调用。表达式应该快速结束，否则用户就会感到拖沓，特别是在较慢的设备上。
-  当计算比较昂贵时，应该考虑缓存那些从其它值计算得出的值。
+  Angular 执行模板表达式比我们想象的频繁。
+  它们可能在每一次按键或鼠标移动后被调用。
+  表达式应该快速结束，否则用户就会感到拖沓，特别是在较慢的设备上。
+  当计算代价较高时，应该考虑缓存那些从其它值计算得出的值。
 
   #### Simplicity
+
   #### 非常简单
+
   Although it's possible to write quite complex template expressions, we really shouldn't.
 
-  虽然写相当复杂的模板表达式确实是可能的，但我们真的不该那样做。
+  虽然可以写出相当复杂的模板表达式，但不要那么去写。
 
   A property name or method call should be the norm.
   An occasional Boolean negation (`!`) is OK.
   Otherwise, confine application and business logic to the component itself,
   where it will be easier to develop and test.
 
-  一个属性名或方法调用属于常态。偶尔的逻辑取反(`!`)也还凑合。
-  其它情况下，组件应该自己实现应用逻辑和业务逻辑，它将让开发和测试变得更容易。
+  常规是属性名或方法调用。偶尔的逻辑取反 (`!`) 也还凑合。
+  其它情况下，应在组件中实现应用和业务逻辑，使开发和测试变得更容易。
 
   #### Idempotence
+
   #### 幂等性
+
   An [idempotent](https://en.wikipedia.org/wiki/Idempotence) expression is ideal because
   it is free of side effects and improves Angular's change detection performance.
 
-  一个[幂等的](https://en.wikipedia.org/wiki/Idempotence)表达式更加理想，因为它没有副作用，而且能提升Angular变更检测的性能。
+  最好使用[幂等的](https://en.wikipedia.org/wiki/Idempotence)表达式，因为它没有副作用，并且能提升 Angular 变更检测的性能。
 
   In Angular terms, an idempotent expression always returns *exactly the same thing* until
   one of its dependent values changes.
 
-  用Angular的术语说，一个幂等的表达式应该总是返回*完全相同的东西*，直到它所依赖的值中有一个变了。
+  在 Angular 的术语中，幂等的表达式应该总是返回*完全相同的东西*，直到某个依赖值发生改变。
 :marked
   Dependent values should not change during a single turn of the event loop.
   If an idempotent expression returns a string or a number, it returns the same string or number
   when called twice in a row. If the expression returns an object (including #{_an} `#{_Array}`),
   it returns the same object *reference* when called twice in a row.
 
-  在单独的一次消息循环中，被依赖的值不应该改变。
-  如果一个幂等的表达式返回了一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。
-  如果表达式返回一个对象(包括`Date`或`Array`)，连续调用它两次，也应该返回同一个对象的*引用*。
+  在单独的一次事件循环中，被依赖的值不应该改变。
+  如果幂等的表达式返回一个字符串或数字，连续调用它两次，也应该返回相同的字符串或数字。
+  如果幂等的表达式返回一个对象（包括`Date`或`Array`），连续调用它两次，也应该返回同一个对象的*引用*。
 
 .l-main-section#template-statements
 :marked
   ## Template statements
+
   ## 模板语句
 
   A template **statement** responds to an **event** raised by a binding target
   such as an element, component, or directive.
 
-  模板**语句**用来响应由绑定目标(如HTML元素、组件或指令)触发的**事件**对象。
+  模板**语句**用来响应由绑定目标（如 HTML 元素、组件或指令）触发的**事件**。
 
   We’ll see template statements in the [event binding](#event-binding) section,
   appearing in quotes to the right of the `=` symbol as in `(event)="statement"`.
 
-  我们将在[事件绑定](#event-binding)一节看到模板语句，它出现在`=`号右侧的引号中，就像这样：`(event)="statement"`。
+  模板语句将在[事件绑定](#event-binding)一节看到，它出现在`=`号右侧的引号中，就像这样：`(event)="statement"`。
 
   A template statement *has a side effect*.
   It's how we update application state from user input.
   There would be no point to responding to an event otherwise.
 
   模板语句*有副作用*。
-  这就是我们如何从用户的输入来更新应用状态。
-  不然，响应一个事件就没有什么意义了。
+  这正是用户输入更新应用状态的方式。
+  否则，响应事件就没有什么意义了。
 
 .l-sub-section
   :marked
     Responding to events is the other side of Angular's "unidirectional data flow".
     We're free to change anything, anywhere, during this turn of the event loop.
 
-    响应事件是Angular中“单向数据流”的另一面。
-    在事件循环的这一回合中，我们可以随意改变任何地方的任何东西。
+    响应事件是 Angular 中“单向数据流”的另一面。
+    在一次事件循环中，可以随意改变任何地方的任何东西。
 :marked
   Like template expressions, template *statements* use a language that looks like #{_JavaScript}.
   The template statement parser is different than the template expression parser and
   specifically supports both basic assignment (`=`) and chaining expressions 
   (with !{__chaining_op}).
 
-  和模板表达式一样，模板*语句*也是一个一个看起来很像JavaScript的语言。
-  模板语句解析器和模板表达式解析器有所不同，它的特别之处在于它既支持基本赋值(`=`)又支持使用分号(`;`)和逗号(`,`)把表达式串起来。
+  和模板表达式一样，模板*语句*使用的语言也像 JavaScript。
+  模板语句解析器和模板表达式解析器有所不同，特别之处在于它支持基本赋值 (`=`) 和表达式链 (`;`和`,`)。
 
   However, certain #{_JavaScript} syntax is not allowed:
 
-  但无论如何，某些JavaScript语法仍然是不允许的：
+  然而，某些 JavaScript 语法仍然是不允许的：
+
   * !{__new_op}
-  * `new`运算符
+
+    `new`运算符
+
   * increment and decrement operators, `++` and `--`
-  * 自增和自减运算符：`++`和`--`
+
+    自增和自减运算符：`++`和`--`
+
   * operator assignment, such as `+=` and `-=`
-  * 操作并赋值，比如`+=`和`-=`
+
+    操作并赋值，例如`+=`和`-=`
+
   * the bitwise operators `|` and `&`
-  * 位操作符`|`和`&`
+
+    位操作符`|`和`&`
+
   * the [template expression operators](#expression-operators)
-  * [模板表达式运算符](#expression-operators)
+
+    [模板表达式运算符](#expression-operators)
 
 :marked
   ### Statement context
+
   ### 语句上下文
 
   As with expressions, statements can refer only to what's in the statement context — typically the
   **component instance** to which we're binding the event.
 
-  和表达式中一样，语句只能引用语句上下文中 —— 典型的就是我们正在绑定事件的那个**组件的实例**中的内容。
+  和表达式中一样，语句只能引用语句上下文中 —— 通常是正在绑定事件的那个**组件实例**。
 
 block statement-context
   :marked
@@ -393,12 +483,13 @@ block statement-context
     can’t refer to `window` or `document`. They can’t call `console.log` or
     `Math.max`.
 
-    模板语句无法引用全局命名控件的任何东西。它们不能引用`window`或者`document`。它们不能调用`console.log`或者`Math.max`。
+    模板语句无法引用全局命名空间的任何东西。它们不能引用`window`或者`document`，
+    不能调用`console.log`或者`Math.max`。
 
 :marked
   The *onSave* in `(click)="onSave()"` is sure to be a method of the data-bound component instance.
 
-  `(click)="onSave()"`中的*onSave*就是数据绑定组件实例中的一个方法。
+  `(click)="onSave()"`中的 *onSave* 就是数据绑定组件实例中的方法。
 
   The statement context may include an object other than the component.
   A [template reference variable](#ref-vars) is one such alternative context object.
@@ -406,52 +497,59 @@ block statement-context
   representing the "message" or "payload" of the raised event.
 
   语句上下文可以包含组件之外的对象。
-  [模板引用对象](#ref-vars)就是这些备选上下文对象中的一个。
-  在事件绑定语句中，我们将频繁的看到被保留的`$event`符号，它代表来自所触发事件的“消息”或“有效载荷”。
+  [模板引用对象](#ref-vars)就是备选上下文对象之一。
+  在事件绑定语句中，经常会看到被保留的`$event`符号，它代表触发事件的“消息”或“有效载荷”。
 
   ### Statement guidelines
+
   ### 语句指南
 
   As with expressions, avoid writing complex template statements.
   A method call or simple property assignment should be the norm.
 
-  和表达式一样，要避免写复杂的模板语句。单一函数调用或者单一属性访问应该是常态。
+  和表达式一样，避免写复杂的模板语句。
+  常规是函数调用或者属性赋值。
 
   Now that we have a feel for template expressions and statements,
   we’re ready to learn about the varieties of data binding syntax beyond interpolation.
 
-  现在，我们对模板表达式和语句有了一点感觉，是时候学习除了插值表达式之外多种多样的数据绑定语法了。
+  现在，对模板表达式和语句有了一点感觉了吧。
+  除插值表达式外，还有各种各样的数据绑定语法，是学习它们是时候了。
 
 .l-main-section
 :marked
   <a id="binding-syntax"></a>
   ## Binding syntax: An overview
+
   ## 绑定语法：概览
+
   Data binding is a mechanism for coordinating what users see with application data values.
   While we could push values to and pull values from HTML,
   the application is easier to write, read, and maintain if we turn these chores over to a binding framework.
   We simply declare bindings between binding sources and target HTML elements and let the framework do the work.
 
-  数据绑定是一种机制，用来协调用户所见和应用程序的数据值。
-  虽然我们能往HTML推送值或者从HTML拉取值，但是如果我们能把这些琐事放进数据绑定框架，应用就会更容易写、读以及维护。
-  我们只要简单的在绑定源和目标HTML元素之间建立绑定，框架就会完成这项工作。
+  数据绑定是一种机制，用来协调用户所见和应用数据。
+  虽然我们能往 HTML 推送值或者从 HTML 拉取值，
+  但如果把这些琐事交给数据绑定框架处理，
+  应用会更容易编写、阅读和维护。
+  只要简单地在绑定源和目标 HTML 元素之间声明绑定，框架就会完成这项工作。
 
   Angular provides many kinds of data binding, and we’ll discuss each of them in this chapter.
   First we'll take a high-level view of Angular data binding and its syntax.
 
-  Angular提供很多种数据绑定，我们将在本章中逐一讨论它们。
-  首先，我们从高层视角来看看Angular数据绑定和它的语法。
+  Angular 提供了各种各样的数据绑定，本章将逐一讨论。
+  首先，从高层视角来看看 Angular 数据绑定和它的语法。
 
   We can group all bindings into three categories by the direction in which data flows.
   Each category has its distinctive syntax:
 
-  根据数据流的方向，我们可以把所有绑定归为三类。
+  根据数据流的方向，可以把所有绑定归为三类。
   每一类都有它独特的语法：
 table
   tr
     th
       p Data direction
-      p 数据流方向
+      p 数据方向
     th
       p Syntax
       p 语法
@@ -511,55 +609,59 @@ table
 
 .alert.is-important
   :marked
-    ### 译注
-    由于HTML的Attribute和DOM的Property在中文中都被翻译成了“属性”，无法加以区分，而接下来的部分重点是对它们进行比较的。
+    译注：由于 HTML attribute 和 DOM property 在中文中都被翻译成了“属性”，无法区分，
+    而接下来的部分重点是对它们进行比较。
 
-    我们无法改变历史，因此，在本章的翻译中，我们保留它们的英文形式，而不加翻译，以免混淆。
-    在本章中，如果有只提“属性”的地方，一定是指Property，因为在Angular 2中，实际上很少涉及Attribute。
+    我们无法改变历史，因此，在本章的翻译中，保留了它们的英文形式，不加翻译，以免混淆。
+    本章中，如果提到“属性”的地方，一定是指 property，因为在 Angular 中，实际上很少涉及 attribute。
 
-    但在其它章节中，为简单起见，凡是能通过上下文明显区分开的，我们就仍统一译为“属性”，区分不明显的，我们会加注英文
+    但在其它章节中，为简单起见，凡是能通过上下文明显区分开的，就仍统一译为“属性”，
+    区分不明显的，会加注英文。
 
 :marked
   Binding types other than interpolation have a **target name** to the left of the equal sign,
   either surrounded by punctuation (`[]`, `()`) or preceded by a prefix (`bind-`, `on-`, `bindon-`).
 
-  除了插值表达式之外的绑定类型，在等号左边都有一个**目标名**，无论是包在括号中(`[]`、`()`)还是用带前缀(`bind-`、`on-`、`bindon-`)的形式。
+  除了插值表达式之外的绑定类型，在等号左边是**目标名**，
+  无论是包在括号中 (`[]`、`()`) 还是用前缀形式 (`bind-`、`on-`、`bindon-`) 。
 
   What is that target? Before we can answer that question, we must challenge ourselves to look at template HTML in a new way.
 
-  什么是“目标”？在回答这个问题之前，我们必须先挑战下自我，尝试用另一种方式来审视模板中的HTML。
+  什么是“目标”？在回答这个问题之前，我们必须先挑战下自我，尝试用另一种方式来审视模板中的 HTML。
 
   ### A new mental model
-  ### 一个新的思维模型
+
+  ### 新的思维模型
 
   With all the power of data binding and our ability to extend the HTML vocabulary
   with custom markup, it is tempting to think of template HTML as *HTML Plus*.
 
-  数据绑定的威力和允许我们用自定义语言来扩展HTML词汇的能力，容易误导我们把模板HTML当成*HTML+*。
+  数据绑定的威力和允许用自定义标记扩展 HTML 词汇的能力，容易误导我们把模板 HTML 当成 *HTML+*。
 
   Well, it *is* HTML Plus.
   But it’s also significantly different than the HTML we’re used to.
   We really need a new mental model.
 
-  也对，它*是*HTML+ 。
-  但它也跟我们用过的那些HTML有着显著的不同。
+  也对，它*是* HTML+。
+  但它也跟我们熟悉的 HTML 有着显著的不同。
   我们需要一种新的思维模型。
 
   In the normal course of HTML development, we create a visual structure with HTML elements, and
   we modify those elements by setting element attributes with string constants.
 
-  在通常的HTML开发过程中，我们使用HTML元素创建一个视觉结构，并通过把字符串常量设置给元素的Attribute来修改那些元素。
+  在正常的 HTML 开发过程中，我们使用 HTML 元素创建视觉结构，
+  通过把字符串常量设置到元素的 attribute 来修改那些元素。
 
 +makeExample('template-syntax/ts/app/app.component.html', 'img+button')(format=".")
 :marked
   We still create a structure and initialize attribute values this way in Angular templates.
 
-  在Angular模板中，我们使用同样的方法来创建一个模板结构和初始化Attribute值。
+  在 Angular 模板中，我们仍使用同样的方式来创建结构和初始化 attribute 值。
 
   Then we learn to create new elements with components that encapsulate HTML
   and drop them into our templates as if they were native HTML elements.
 
-  然后，我们学着用包含HTML模板的组件创建新元素，并把它们当作原生HTML元素在模板中使用。
+  然后，用封装了 HTML 的组件创建新元素，并把它们当作原生 HTML 元素在模板中使用。
 +makeExample('template-syntax/ts/app/app.component.html', 'hero-detail-1')(format=".")
 :marked
   That’s HTML Plus.
@@ -568,7 +670,7 @@ table
 
   Now we start to learn about data binding. The first binding we meet might look like this:
 
-  现在我们开始学习数据绑定。我们碰到的第一种数据绑定看起来是这样的：
+  现在开始学习数据绑定。我们碰到的第一种数据绑定看起来是这样的：
 
 +makeExample('template-syntax/ts/app/app.component.html', 'disabled-button-1')(format=".")
 :marked
@@ -576,130 +678,134 @@ table
   our intuition tells us that we’re binding to the button's `disabled` attribute and setting
   it to the current value of the component’s `isUnchanged` property.
 
-  我们首先会注意到这个怪异的括号注解。接下来，直觉告诉我们，我们正在绑定到这个按钮的`disabled` Attribute。
-  并且把它设置为组件的`isUnchanged`Property的当前值。
+  过会儿再认识那个怪异的方括号记法。直觉告诉我们，我们正在绑定按钮的`disabled` attribute。
+  并把它设置为组件的`isUnchanged`属性的当前值。
 
   Our intuition is wrong! Our everyday HTML mental model is misleading us.
   In fact, once we start data binding, we are no longer working with HTML *attributes*. We aren't setting attributes.
   We are setting the *properties* of DOM elements, components, and directives.
 
-  但我们的直觉是错的！我们的日常HTML思维模式在误导我们。
-  实际上，一旦我们开始数据绑定，我们就不再跟Attribute打交道了。我们并不是在设置Attribute，
-  而是在设置DOM元素、组件和指令的Property。
+  但我们的直觉是错的！日常的 HTML 思维模式在误导我们。
+  实际上，一旦开始数据绑定，就不再跟 HTML attribute 打交道了。
+  这里不是设置 attribute，而是设置 DOM 元素、组件和指令的 property。
 
 .l-sub-section
   :marked
     ### HTML attribute vs. DOM property
-    ### HTML的Attribute vs. DOM的Property
+
+    ### HTML attribute 与 DOM property 的对比
 
     The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.
 
-    要想理解Angular绑定如何工作，清楚HTML Attribute和DOM Property之间的区别是至关重要的。
+    要想理解 Angular 绑定如何工作，重点是搞清 HTML attribute 和 DOM property 之间的区别。
 
     **Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).**
 
-    **Attribute是由HTML定义的。Property是由DOM(Document Object Model)定义的。**
+    **attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。**
 
     * A few HTML attributes have 1:1 mapping to properties. `id` is one example.
 
-    * 少量HTML Attribute和Property之间有着1:1的映射。`id`就是一个例子。
+      少量 HTML attribute 和 property 之间有着 1:1 的映射，如`id`。
 
     * Some HTML attributes don't have corresponding properties. `colspan` is one example.
 
-    * 有些HTML Attribute没有对应的Property。`colspan`就是一个例子。
+      有些 HTML attribute 没有对应的 property，如`colspan`。
 
     * Some DOM properties don't have corresponding attributes. `textContent` is one example.
 
-    * 有些DOM Property没有对应的Attribute。`textContent`就是一个例子。
+      有些 DOM property 没有对应的 attribute，如`textContent`。
 
     * Many HTML attributes appear to map to properties ... but not in the way we might think!
 
-    * 大量HTML Attribute看起来映射到了Property…… 但却不像我们想象的那样！
+      大量 HTML attribute看起来映射到了property…… 但却不像我们想的那样！
 
     That last category can be especially confusing ... until we understand this general rule:
 
-    尤其最后一种更让人困惑…… 除非我们能理解这个普遍原则：
+    最后一类尤其让人困惑…… 除非我们能理解这个普遍原则：
 
     **Attributes *initialize* DOM properties and then they are done.
     Property values can change; attribute values can't.**
 
-    **Attribute *初始化* DOM Property，然后它们的任务就完成了。Property的值可以改变；Attribute的值不能改变。**
+    **attribute *初始化* DOM property，然后它们的任务就完成了。property 的值可以改变；attribute 的值不能改变。**
 
     For example, when the browser renders `<input type="text" value="Bob">`, it creates a
     corresponding DOM node with a `value` property *initialized* to "Bob".
 
-    例如，当浏览器渲染`<input type="text" value="Bob">`时，它创建了一个对应的DOM节点，它的`value` Property被*初始化为*“Bob”。
+    例如，当浏览器渲染`<input type="text" value="Bob">`时，它将创建相应 DOM 节点，
+    其`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 we discover if we ask the input element
     about that attribute: `input.getAttribute('value') // returns "Bob"`
 
-    当用户在输入框中输入 “Sally” 时，DOM元素的`value` *Property* 变成了“Sally”。
-    但是这个HTML`value` *Attribute* 保持不变。
-    如果我们通过`input.getAttribute('value') // 返回 "Bob"`语句获取这个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 attribute `value`指定了*初始*值；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 we 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 we cannot enable a button by writing `<button disabled="false">Still Disabled</button>`.
 
-    添加或删除`disabled`时，*Attribute*会禁用或启用这个按钮。但 *Attribute*的值无关紧要，这就是我们为什么没法通过
-    `<button disabled="false">仍被禁用</button>`这种写法来启用一个按钮的原因。
+    添加或删除`disabled` *attribute*会禁用或启用这个按钮。但 *attribute* 的值无关紧要，这就是我们为什么没法通过
+    `<button disabled="false">仍被禁用</button>`这种写法来启用按钮。
 
     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绑定)可以禁用或启用这个按钮。
-    这就是*Property*的价值。
+    设置按钮的`disabled` *property*（如，通过 Angular 绑定）可以禁用或启用这个按钮。
+    这就是 *property* 的价值。
 
     **The HTML attribute and the DOM property are not the same thing, even when they have the same name.**
 
-    **就算名字相同，HTML Attribute和DOM Property也不是同一样东西。**
+    **就算名字相同，HTML attribute 和 DOM property 也不是同一样东西。**
 
 :marked
   This is so important, we’ll say it again.
 
-  这句话很重要，我们得再强调一次：
+  这句话很重要，得再强调一次：
 
   **Template binding works with *properties* and *events*, not *attributes*.**
 
-  **模板绑定是通过*Property*和*事件*来工作的，而不是*Attribute*。**
+  **模板绑定是通过 *property* 和*事件*来工作的，而不是 *attribute*。**
 
 .callout.is-helpful
   header A world without attributes
-  header 一个没有Attribute的世界
+  header 没有 attribute 的世界
   :marked
     In the world of Angular, the only role of attributes is to initialize element and directive state.
     When we data bind, we're dealing exclusively with element and directive properties and events.
     Attributes effectively disappear.
 
-    在Angular 2的世界中，Attribute唯一的作用是用来初始化元素和指令的状态。
-    当进行数据绑定时，我们只是在与元素和指令的Property和事件打交道，而Attribute就完全靠边站了。
+    在 Angular 的世界中，attribute 唯一的作用是用来初始化元素和指令的状态。
+    当进行数据绑定时，只是在与元素和指令的 property 和事件打交道，而 attribute 就完全靠边站了。
 :marked
   With this model firmly in mind, let's learn about binding targets.
 
-  请把这个思维模型牢牢的印在脑子里，接下来我们学习什么是“绑定目标”。
+  把这个思维模型牢牢的印在脑子里，接下来，学习什么是绑定目标。
 
   ### Binding targets
+
   ### 绑定目标
+
   The **target of a data binding** is something in the DOM.
   Depending on the binding type, the target can be an
   (element | component | directive) property, an
   (element | component | directive) event, or (rarely) an attribute name.
   The following table summarizes:
 
-  **数据绑定的目标**是DOM中的某些东西。
-  这个目标可能是(元素|组件|指令)的Property、(元素|组件|指令)的事件，或(极少数情况下)一个Attribute名。
+  **数据绑定的目标**是 DOM 中的某些东西。
+  这个目标可能是（元素 | 组件 | 指令的）property、（元素 | 组件 | 指令的）事件，或(极少数情况下) attribute 名。
   下面是的汇总表：
 
 //- If you update this table, UPDATE it in Dart & JS, too.
@@ -721,11 +827,11 @@ table
       p Property
     td
       p Element&nbsp;property
-      p 元素的Property
+      p 元素的 property
       p Component&nbsp;property
-      p 组件的Property
+      p 组件的 property
       p Directive&nbsp;property
-      p 指令的Property
+      p 指令的 property
     td
       +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-syntax-1')(format=".")
   tr
@@ -747,20 +853,20 @@ table
       p 双向
     td
       p Event and property
-      p 事件与Property
+      p 事件与 property
     td
       +makeExample('template-syntax/ts/app/app.component.html', '2-way-binding-syntax-1')(format=".")
   tr
     td Attribute
     td
       p Attribute (the&nbsp;exception)
-      p Attribute例外情况
+      p attribute（例外情况）
     td
       +makeExample('template-syntax/ts/app/app.component.html', 'attribute-binding-syntax-1')(format=".")
   tr
     td
       p Class
-      p CSS类
+      p CSS 类
     td
       p <code>class</code> property
       p <code>class</code> property
@@ -785,22 +891,24 @@ table
 .l-main-section
 :marked
   ## Property binding
-  ## 属性绑定
+
+  ## 属性 (property) 绑定
+
   We write a template **property binding** when we want to set a property of a view element to the value of
   a [template expression](#template-expressions).
 
-  当要把一个视图元素的属性设置为[模板表达式](#template-expressions)时，我们就要写模板的**属性绑定**。
+  当要把视图元素的属性 (property) 设置为[模板表达式](#template-expressions)时，就要写模板的**属性 (property) 绑定**。
 
   The most common property binding sets an element property to a component property value. An example is
   binding the `src` property of an image element to a component’s `heroImageUrl` property:
 
-  最常用的属性绑定是把元素的属性设置为组件中属性的值。
-  下面这个例子中，image元素的`src`属性会被绑定到组件的`heroImageUrl`属性上：
+  最常用的属性绑定是把元素属性设置为组件属性的值。
+  下面这个例子中，image 元素的`src`属性会被绑定到组件的`heroImageUrl`属性上：
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-1')(format=".")
 :marked
   Another example is disabling a button when the component says that it `isUnchanged`:
 
-  另一个例子是当组件说它`isUnchanged`(未改变)时禁用一个按钮：
+  另一个例子是当组件说它`isUnchanged`（未改变）时禁用按钮：
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-2')(format=".")
 :marked
   Another is setting a property of a directive:
@@ -811,30 +919,32 @@ table
   Yet another is setting the model property of a custom component (a great way
   for parent and child components to communicate):
 
-  还有另一个例子是设置一个自定义组件的模型属性(这是父子组件之间通讯的重要途径)：
+  还有另一个例子是设置自定义组件的模型属性（这是父子组件之间通讯的重要途径）：
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-4')(format=".")
 :marked
   ### One-way *in*
+
   ### 单向*输入*
+
   People often describe property binding as *one-way data binding* because it flows a value in one direction,
   from a component’s data property into a target element property.
 
-  人们经常把属性绑定描述成*单向数据绑定*，因为值的流动是单向的，从组件中的属性数据，流动到目标元素的属性。
+  人们经常把属性绑定描述成*单向数据绑定*，因为值的流动是单向的，从组件的数据属性流动到目标元素的属性。
 
   We cannot use property binding to pull values *out* of the target element.
   We can't bind to a property of the target element to read it. We can only set it.
 
-  我们不能使用属性绑定来从目标元素拉取值，也不能绑定到目标元素的属性来读取它。我们只能设置它。
+  不能使用属性绑定来从目标元素拉取值，也不能绑定到目标元素的属性来读取它。只能设置它。
 
 .l-sub-section
   :marked
     Nor can we use property binding to *call* a method on the target element.
 
-    我们也不能使用属性绑定来*调用*目标元素上的方法。
+    也不能使用属性绑定来*调用*目标元素上的方法。
 
     If the element raises events we can listen to them with an [event binding](#event-binding).
 
-    如果这个元素触发了事件，我们可以通过[事件绑定](#event-binding)来监听它们。
+    如果这个元素触发了事件，可以通过[事件绑定](#event-binding)来监听它们。
 
     If we must read a target element property or call one of its methods,
     we'll need a different technique.
@@ -842,16 +952,17 @@ table
     [ViewChild](../api/core/index/ViewChild-decorator.html) and
     [ContentChild](../api/core/index/ContentChild-decorator.html).
 
-    如果我们不得不读取目标元素上的属性或调用它的某个方法，我们得用另一种技术。
-    参见API参考手册中的[viewChild](../api/core/index/ViewChild-var.html)和
-    [contentChild](../api/core/index/ContentChild-var.html)。
+    如果必须读取目标元素上的属性或调用它的某个方法，得用另一种技术。
+    参见 API 参考手册中的 [viewChild](../api/core/index/ViewChild-var.html) 和 [contentChild](../api/core/index/ContentChild-var.html)。
 
 :marked
   ### Binding target
+
   ### 绑定目标
+
   An element property between enclosing square brackets identifies the target property. The target property in the following code is the image element’s `src` property.
 
-  包裹在方括号中的元素属性名标记着目标属性。下列代码中的目标属性是image元素的`src`属性。
+  包裹在方括号中的元素属性名标记着目标属性。下列代码中的目标属性是 image 元素的`src`属性。
 
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-1')(format=".")
 :marked
@@ -862,13 +973,14 @@ table
 :marked
   The target name is always the name of a property, even when it appears to be the name of something else. We see `src` and may think it’s the name of an attribute. No. It’s the name of an image element property.
 
-  目标的名字总是属性的名字。即使它看起来和别的名字一样。我们看到`src`时，可能会把它当做Attribute。不！它不是！它是image元素的属性名。
+  目标的名字总是 property 的名字。即使它看起来和别的名字一样。
+  看到`src`时，可能会把它当做 attribute。不！它不是！它是 image 元素的 property 名。
 
   Element properties may be the more common targets,
   but Angular looks first to see if the name is a property of a known directive,
   as it is in the following example:
 
-  元素属性可能是最常见的绑定目标，但Angular会先去看这个名字是否是某个已知指令的属性名，就像下面的例子中一样：
+  元素属性可能是最常见的绑定目标，但 Angular 会先去看这个名字是否是某个已知指令的属性名，就像下面的例子中一样：
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-3')(format=".")
 
 .l-sub-section
@@ -877,45 +989,52 @@ table
     one of the property names listed in the directive’s `inputs` array or a property decorated with `@Input()`.
     Such inputs map to the directive’s own properties.
 
-    严格来说，Angular正在匹配一个指令的[input](#inputs-outputs)的名字。这个名字是指令的`inputs`数组中所列的名字之一，或者是一个带有`@Input()`装饰器的属性。
-    这样的inputs被映射到了指令自己的属性。
+    严格来说，Angular 正在匹配指令的[输入属性](#inputs-outputs)的名字。
+    这个名字是指令的`inputs`数组中所列的名字，或者是带有`@Input()`装饰器的属性。
+    这些输入属性被映射为指令自己的属性。
 :marked
   If the name fails to match a property of a known directive or element, Angular reports an “unknown directive” error.
 
-  如果名字没有匹配上一个已知指令或元素的属性，Angular就会报告一个“未知指令”的错误。
+  如果名字没有匹配上已知指令或元素的属性，Angular 就会报告“未知指令”的错误。
 
   ### Avoid side effects
+
   ### 消除副作用
+
   As we've already discussed, evaluation of a template expression should have no visible side effects. The expression language itself does its part to keep us safe. We can’t assign a value to anything in a property binding expression nor use the increment and decrement operators.
 
-  正如我们曾讨论过的，计算模板表达式不能有可见的副作用。表达式语言本身可以提供一部分安全保障。我们不能在属性绑定表达式中对任何东西赋值，也不能使用自增、自减运算符。
+  正如曾讨论过的，模板表达式的计算不能有可见的副作用。表达式语言本身可以提供一部分安全保障。
+  不能在属性绑定表达式中对任何东西赋值，也不能使用自增、自减运算符。
 
   Of course, our expression might invoke a property or method that has side effects. Angular has no way of knowing that or stopping us.
 
-  当然，我们的表达式也可能会调用一个具有副作用的属性或方法。但Angular没法知道这一点，也没法防止我们误用。
+  当然，表达式可能会调用具有副作用的属性或方法。但 Angular 没法知道这一点，也没法阻止我们。
 
   The expression could call something like `getFoo()`. Only we know what `getFoo()` does.
   If `getFoo()` changes something and we happen to be binding to that something, we risk an unpleasant experience. Angular may or may not display the changed value. Angular may detect the change and throw a warning error. Our general advice: stick to data properties and to methods that return values and do no more.
 
-  表达式中可以调用像`getFoo()`这样的方法。只有我们才知道`getFoo()`干了什么。
-  如果`getFoo()`改变了什么，而我们把它绑定在什么地方，我们就可能把自己坑了。Angular可能显示也可能不显示变化后的值。Angular还可能检测到变化，并抛出一个警告型错误。
-  更具普遍性的建议是：只使用数据属性和那些只返回值而不做其它事情的方法。
+  表达式中可以调用像`getFoo()`这样的方法。只有我们知道`getFoo()`干了什么。
+  如果`getFoo()`改变了某个东西，恰好又绑定到个这个东西，我们就可能把自己坑了。
+  Angular 可能显示也可能不显示变化后的值。Angular 还可能检测到变化，并抛出警告型错误。
+  一般建议是，只绑定数据属性和那些只返回值而不做其它事情的方法。
 
   ### Return the proper type
+
   ### 返回恰当的类型
+
   The template expression should evaluate to the type of value expected by the target property.
   Return a string if the target property expects a string.
   Return a number if the target property expects a number.
   Return an object if the target property expects an object.
 
-  模板表达式应该返回一个目标属性所需类型的值。
+  模板表达式应该返回目标属性所需类型的值。
   如果目标属性想要个字符串，就返回字符串。
   如果目标属性想要个数字，就返回数字。
   如果目标属性想要个对象，就返回对象。
 
   The `hero` property of the `HeroDetail` component expects a `Hero` object, which is exactly what we’re sending in the property binding:
 
-  `HeroDetail`组件的`hero`属性想要一个`Hero`对象，那我们就要在属性绑定中精确的给它一个`Hero`对象：
+  `HeroDetail`组件的`hero`属性想要一个`Hero`对象，那就在属性绑定中精确地给它一个`Hero`对象：
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-4')(format=".")
 
 block dart-type-exceptions
@@ -923,13 +1042,15 @@ block dart-type-exceptions
 
 :marked
   ### Remember the brackets
+
   ### 别忘了方括号
+
   The brackets tell Angular to evaluate the template expression.
   If we forget the brackets, Angular treats the string as a constant and *initializes the target property* with that string.
   It does *not* evaluate the string!
 
-  括号会告诉Angular要计算模板表达式。
-  如果我们忘了括号，Angular就会把这个表达式当做一个字符串常量看待，并且用该字符串来*初始化目标属性*。
+  方括号告诉 Angular 要计算模板表达式。
+  如果忘了加方括号，Angular 会把这个表达式当做字符串常量看待，并用该字符串来*初始化目标属性*。
   它*不会*计算这个字符串。
 
   Don't make the following mistake:
@@ -943,33 +1064,42 @@ block dart-type-exception-example
 a(id="one-time-initialization")
 :marked
   ### One-time string initialization
+
   ### 一次性字符串初始化
+
   We *should* omit the brackets when all of the following are true:
 
-  当下列条件满足时，我们*应该*省略括号：
+  当下列条件满足时，*应该*省略括号：
   * The target property accepts a string value.
-  * 目标属性接受字符串值。
+
+    目标属性接受字符串值。
+
   * The string is a fixed value that we can bake into the template.
-  * 我们想合并到模板中的字符串是一个固定值。
+
+    字符串是个固定值，可以直接合并到模块中。
+
   * This initial value never changes.
-  * 这个初始值永不改变。
+
+    这个初始值永不改变。
 
   We routinely initialize attributes this way in standard HTML, and it works
   just as well for directive and component property initialization.
   The following example initializes the `prefix` property of the `HeroDetailComponent` to a fixed string,
   not a template expression. Angular sets it and forgets about it.
 
-  我们经常这样在标准HTML中用这种方式初始化Attribute，并且这种方式也可以用在初始化指令和组件的属性。
-  下面这个例子把`HeroDetailComponent`的`prefix`属性初始化成了一个固定的字符串，而不是模板表达式。Angular设置它，然后忘记它。
+  我们经常这样在标准 HTML 中用这种方式初始化 attribute，这种方式也可以用在初始化指令和组件的属性。
+  下面这个例子把`HeroDetailComponent`的`prefix`属性初始化为固定的字符串，而不是模板表达式。Angular 设置它，然后忘记它。
 // #enddocregion property-binding-12
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-7')(format=".")
 :marked
   The `[hero]` binding, on the other hand, remains a live binding to the component's `currentHero` property.
 
-  作为对比，这个`[hero]`绑定就保持了到组件的`currentHero`属性的活绑定，它会一直随着更新。
+  作为对比，`[hero]`绑定是组件的`currentHero`属性的活绑定，它会一直随着更新。
 
   ### Property binding or interpolation?
+
   ### 属性绑定还是插值表达式？
+
   We often have a choice between interpolation and property binding.
   The following binding pairs do the same thing:
 
@@ -981,7 +1111,8 @@ a(id="one-time-initialization")
   In fact, Angular  translates those interpolations into the corresponding property bindings
   before rendering the view.
 
-  在多数情况下，插值表达式是一个更方便的备选项。实际上，在渲染视图之前，Angular就把这些插值表达式翻译成了对应的属性绑定形式。
+  在多数情况下，插值表达式是更方便的备选项。
+  实际上，在渲染视图之前，Angular 把这些插值表达式翻译成相应的属性绑定。
 
   There is no technical reason to prefer one form to the other.
   We lean toward readability, which tends to favor interpolation.
@@ -990,11 +1121,14 @@ a(id="one-time-initialization")
 
   没有技术上的理由能决定哪种形式更好。
   我们倾向于可读性，所以倾向于插值表达式。
-  我们建议建立组织级的代码风格规定，然后选择一种形式，既能遵循规则，又能让手头的任务做起来更自然。
+  建议建立代码风格规则，选择一种形式，
+  这样，既遵循了规则，又能让手头的任务做起来更自然。
 
 :marked
   #### Content security
+
   #### 内容安全
+
   Imagine the following *malicious content*.
 
   假设下面的*恶毒内容*
@@ -1005,13 +1139,15 @@ a(id="one-time-initialization")
   It **will not** allow HTML with script tags to leak into the browser, neither with interpolation
   nor property binding.
 
-  幸运的是，Angular数据绑定对危险HTML有防备。在显示它们之前，它对内容先进行*消毒*。不管是插值表达式还是属性绑定，都**不会**允许带有script标签的HTML泄漏到浏览器中。
+  幸运的是，Angular 数据绑定对危险 HTML 有防备。
+  在显示它们之前，它对内容先进行*消毒*。
+  不管是插值表达式还是属性绑定，都**不会**允许带有 script 标签的 HTML 泄漏到浏览器中。
 +makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation-sanitization')(format=".")    
 :marked
   Interpolation handles the script tags differently than property binding but both approaches render the
   content harmlessly.
 
-  插值表达式处理script标签与属性绑定有所不同，但是它们两个都只渲染没有危害的内容。
+  插值表达式处理 script 标签与属性绑定有所不同，但是二者都只渲染没有危害的内容。
 figure.image-display
   img(src='/resources/images/devguide/template-syntax/evil-title.png' alt="evil title made safe" width='500px')
 
@@ -1019,30 +1155,34 @@ figure.image-display
 :marked
   <a id="other-bindings"></a>
   ## Attribute, class, and style bindings
-  ## attribute、class和style绑定
+
+  ## attribute、class 和 style 绑定
+
   The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
 
   模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。
 
   ### Attribute binding
-  ### Attribute绑定
+
+  ### attribute 绑定
+
   We can set the value of an attribute directly with an **attribute binding**.
 
-  我们可以通过**Attribute绑定**来直接设置Attribute的值。
+  可以通过**attribute 绑定**来直接设置 attribute 的值。
 .l-sub-section
   :marked
     This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.
 
-    这是“绑定到目标属性”这条规则中唯一的例外。这是唯一的一个能创建和设置Attribute的绑定形式。
+    这是“绑定到目标属性 (property)”这条规则中唯一的例外。这是唯一的能创建和设置 attribute 的绑定形式。
 
 :marked
   We have stressed throughout this chapter that setting an element property with a property binding is always preferred to setting the attribute with a string. Why does Angular offer attribute binding?
 
-  在本章中，我们通篇都在说通过属性绑定来设置元素的属性总是好于用字符串设置Attribute。为什么Angular还提供了Attribute绑定呢？
+  本章中，通篇都在说通过属性绑定来设置元素的属性总是好于用字符串设置 attribute。为什么 Angular 还提供了 attribute 绑定呢？
 
   **We must use attribute binding when there is no element property to bind.**
 
-  **因为当元素没有属性可绑的时候，我们不得不使用Attribute绑定。**
+  **因为当元素没有属性可绑的时候，就必须使用 attribute 绑定。**
 
   Consider the [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA),
   [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG), and
@@ -1050,54 +1190,53 @@ figure.image-display
   They do not correspond to element properties, and they do not set element properties.
   There are no property targets to bind to.
 
-  考虑[ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA),
-  [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG)和
-  table中的colspan/rowspan等Attribute。它们是纯粹的Attribute。
-  它们没有对应的属性可供绑定。
+  考虑 [ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)，
+  [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) 和 table 中的 colspan/rowspan 等 attribute。
+  它们是纯粹的 attribute，没有对应的属性可供绑定。
 
   We become painfully aware of this fact when we try to write something like this:
 
-  如果我们想写出类似下面这样的东西，这一现状会令我们痛苦：
+  如果想写出类似下面这样的东西，现状会令我们痛苦：
 code-example(language="html").
   &lt;tr>&lt;td colspan="{{1 + 1}}">Three-Four&lt;/td>&lt;/tr>
 :marked
   We get this error:
 
-  我们会得到这个错误：
+  会得到这个错误：
 code-example(format="nocode").
   Template parse errors:
   Can't bind to 'colspan' since it isn't a known native property
 
-  模板解析错误：不能绑定到'colspan'，因为它不是已知的原生属性
+  模板解析错误：不能绑定到 'colspan'，因为它不是已知的原生属性
 :marked
   As the message says, the `<td>` element does not have a `colspan` property.
   It has the "colspan" *attribute*, but
   interpolation and property binding can set only *properties*, not attributes.
 
   正如提示中所说，`<td>`元素没有`colspan`属性。
-  但是插值表达式和属性绑定只能设置*属性*，而不是Attribute。
+  但是插值表达式和属性绑定只能设置*属性*，不能设置 attribute。
 
   We need attribute bindings to create and bind to such attributes.
 
-  我们需要Attribute绑定来创建和绑定到这样的Attribute。
+  我们需要 attribute 绑定来创建和绑定到这样的 attribute。
 
   Attribute binding syntax resembles property binding.
   Instead of an element property between brackets, we start with the prefix **`attr`**,
   followed by a dot (`.`) and the name of the attribute. We then set the attribute
   value, using an expression that resolves to a string.
 
-  Attribute绑定在语法上类似于属性绑定。
-  但方括号中的部分不是一个元素的属性名，而是由一个**`attr`**前缀，紧跟着一个点(`.`)，再跟着Attribute的名字组成。
-  我们可以通过一个能求值为字符串的表达式来设置Attribute的值。
+  attribute 绑定的语法与属性绑定类似。
+  但方括号中的部分不是元素的属性名，而是由**`attr`**前缀，一个点 (`.`) 和 attribute 的名字组成。
+  可以通过值为字符串的表达式来设置 attribute 的值。
 
   Here we bind `[attr.colspan]` to a calculated value:
 
-  这里我们把`[attr.colspan]`绑定成一个通过计算得到的值：
+  这里把`[attr.colspan]`绑定到一个计算值：
 +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-colspan')(format=".")
 :marked
   Here's how the table renders:
 
-  这里是table渲染出来的样子：
+  这里是表格渲染出来的样子：
 
   <table border="1px">
     <tr><td colspan="2">One-Two</td></tr>
@@ -1107,34 +1246,37 @@ code-example(format="nocode").
   One of the primary use cases for attribute binding
   is to set ARIA attributes, as in this example:
 
-  Attribute绑定的主要用例之一是设置ARIA Attribute(译注：ARIA指可访问性，用于给残障人士访问互联网提供便利)，就像这个例子中一样：
+  attribute 绑定的主要用例之一是设置 ARIA attribute（译注：ARIA指可访问性，用于给残障人士访问互联网提供便利），
+  就像这个例子中一样：
 +makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".")
 :marked
   ### Class binding
 
-  ### CSS类绑定
+  ### CSS 类绑定
 
   We can add and remove CSS class names from an element’s `class` attribute with
   a **class binding**.
 
-  借助**CSS类绑定**，我们可以从元素的`class`Attribute上添加和移除CSS类名。
+  借助 **CSS 类绑定**，可以从元素的`class` attribute 上添加和移除 CSS 类名。
 
   Class binding syntax resembles property binding.
   Instead of an element property between brackets, we start with the prefix `class`,
   optionally followed by a dot (`.`) and the name of a CSS class: `[class.class-name]`.
 
-  CSS类绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个**`class`**前缀，紧跟着一个点(`.`)，再跟着CSS类的名字组成。
+  CSS 类绑定绑定的语法与属性绑定类似。
+  但方括号中的部分不是元素的属性名，而是由**`class`**前缀，一个点 (`.`)和 CSS 类的名字组成，
   其中后两部分是可选的。形如：`[class.class-name]`。
 
   The following examples show how to add and remove the application's "special" class
   with class bindings.  Here's how we set the attribute without binding:
 
-  下列例子示范了如何通过CSS类绑定来添加和移除应用的"special"类。不用绑定直接设置Attribute时是这样的：
+  下列例子示范了如何通过 CSS 类绑定来添加和移除应用的 "special" 类。不用绑定直接设置 attribute 时是这样的：
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-1')(format=".")
 :marked
   We can replace that with a binding to a string of the desired class names; this is an all-or-nothing, replacement binding.
 
-  我们可以把它改写为一个绑定到所需CSS类名的绑定；这是一个或者全有或者全无的替换型绑定(译注：即当badCurly有值时class这个Attribute设置的内容会被完全覆盖)。
+  可以把它改写为绑定到所需 CSS 类名的绑定；这是一个或者全有或者全无的替换型绑定。
+  （译注：即当 badCurly 有值时 class 这个 attribute 设置的内容会被完全覆盖）
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
 
 :marked
@@ -1142,8 +1284,8 @@ code-example(format="nocode").
   Angular adds the class when the template expression evaluates to #{_truthy}.
   It removes the class when the expression is #{_falsey}.
 
-  最后，我们可以绑定到一个特定的类名。
-  当模板表达式的求值结果是真值时，Angular会添加这个类，反之则移除它。
+  最后，可以绑定到特定的类名。
+  当模板表达式的求值结果是真值时，Angular 会添加这个类，反之则移除它。
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-3')(format=".")
 
 .l-sub-section
@@ -1151,7 +1293,7 @@ code-example(format="nocode").
     While this is a fine way to toggle a single class name,
     we generally prefer the [NgClass directive](#ngClass) for managing multiple class names at the same time.
 
-    虽然这是一个切换单一类名的好办法，但我们通常更喜欢使用[NgClass指令](#ngClass)来同时管理多个类名。
+    虽然这是切换单一类名的好办法，但我们通常更喜欢使用 [NgClass指令](#ngClass) 来同时管理多个类名。
 
 :marked
   ### Style binding
@@ -1160,20 +1302,21 @@ code-example(format="nocode").
 
   We can set inline styles with a **style binding**.
 
-  通过**样式绑定**，我们可以设置内联样式。
+  通过**样式绑定**，可以设置内联样式。
 
   Style binding syntax resembles property binding.
   Instead of an element property between brackets, we start with the prefix `style`,
   followed by a dot (`.`) and the name of a CSS style property: `[style.style-property]`.
 
-  样式绑定在语法上类似于属性绑定。但方括号中的部分不是一个元素的属性名，而是包括一个**`style`**前缀，紧跟着一个点(`.`)，再跟着CSS样式的属性名。
+  样式绑定的语法与属性绑定类似。
+  但方括号中的部分不是元素的属性名，而由**`style`**前缀，一个点 (`.`)和 CSS 样式的属性名组成。
   形如：`[style.style-property]`。
 
 +makeExample('template-syntax/ts/app/app.component.html', 'style-binding-1')(format=".")
 :marked
   Some style binding styles have unit extension. Here we conditionally set the font size in  “em” and “%” units .
 
-  有些样式绑定中的样式带有单位。在这里，我们可以根据条件用“em”和“%”来设置字体大小的单位。
+  有些样式绑定中的样式带有单位。在这里，以根据条件用 “em” 和 “%” 来设置字体大小的单位。
 +makeExample('template-syntax/ts/app/app.component.html', 'style-binding-2')(format=".")
 
 .l-sub-section
@@ -1181,7 +1324,7 @@ code-example(format="nocode").
     While this is a fine way to set a single style,
     we generally prefer the [NgStyle directive](#ngStyle) when setting several inline styles at the same time.
 
-    虽然这是一个设置单一样式的好办法，但我们通常更喜欢使用[NgStyle指令](#ngStyle)来同时设置多个内联样式。
+    虽然这是设置单一样式的好办法，但我们通常更喜欢使用 [NgStyle指令](#ngStyle) 来同时设置多个内联样式。
 
 .l-sub-section
   :marked
@@ -1189,8 +1332,8 @@ code-example(format="nocode").
     [dash-case](glossary.html#dash-case), as shown above, or
     [camelCase](glossary.html#camelcase), such as `fontSize`.
 
-    注意，一个_样式属性_命名方法可以用[中线命名法](glossary.html#dash-case)，像上面的一样
-    也可以用[驼峰式命名法](glossary.html#camelcase)，比如`fontSize`。
+    注意，_样式属性_命名方法可以用[中线命名法](glossary.html#dash-case)，像上面的一样
+    也可以用[驼峰式命名法](glossary.html#camelcase)，如`fontSize`。
 
 block style-property-name-dart-diff
   //- N/A
@@ -1203,7 +1346,7 @@ block style-property-name-dart-diff
 
   The bindings we’ve met so far flow data in one direction: **from a component to an element**.
 
-  我们前面遇到过的那些绑定的数据流都是单向的：**从组件到元素**。
+  前面遇到的绑定的数据流都是单向的：**从组件到元素**。
 
   Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists.
   They click buttons. Such user actions may result in a flow of data in the opposite direction:
@@ -1216,16 +1359,16 @@ block style-property-name-dart-diff
   keystrokes, mouse movements, clicks, and touches.
   We declare our interest in user actions through Angular event binding.
 
-  知道用户动作的唯一方式是监听正确的事件，比如击键、鼠标移动、点击和触屏。
-  我们可以通过Angular的事件绑定来定义我们对哪些用户动作感兴趣。
+  知道用户动作的唯一方式是监听某些事件，如按键、鼠标移动、点击和触摸屏幕。
+  可以通过 Angular 事件绑定来声明对哪些用户动作感兴趣。
 
   Event binding syntax consists of a **target event** within parentheses on the left of an equal sign, and a quoted
   [template statement](#template-statements) on the right.
   The following event binding listens for the button’s click event, calling
   the component's `onSave()` method whenever a click occurs:
 
-  事件绑定语法由等号左侧带圆括号的**目标事件**，和右侧一个引号中的[模板语句](#template-statements)组成。
-  下列事件绑定监听按钮的点击事件。无论什么时候，发生点击时，都会调用组件的`onSave()`方法。
+  事件绑定语法由等号左侧带圆括号的**目标事件**和右侧引号中的[模板语句](#template-statements)组成。
+  下面事件绑定监听按钮的点击事件。每当点击发生时，都会调用组件的`onSave()`方法。
 
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 
@@ -1237,7 +1380,7 @@ block style-property-name-dart-diff
   A **name between parentheses** &mdash; for example, `(click)` &mdash;
   identifies the target event. In the following example, the target is the button’s click event.
 
-  **圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中，目标是按钮的click事件。
+  **圆括号中的名称** —— 比如`(click)` —— 标记出目标事件。在下面例子中，目标是按钮的 click 事件。
 
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
@@ -1249,7 +1392,7 @@ block style-property-name-dart-diff
   Element events may be the more common targets, but Angular looks first to see if the name matches an event property
   of a known directive, as it does in the following example:
 
-  元素事件可能是更常见的目标，但Angular会先看这个名字是否能匹配上已知指令的事件属性，就像下面这个例子：
+  元素事件可能是更常见的目标，但 Angular 会先看这个名字是否能匹配上已知指令的事件属性，就像下面这个例子：
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-3')(format=".")
 
 .l-sub-section
@@ -1257,18 +1400,20 @@ block style-property-name-dart-diff
     The `myClick` directive is further described in the section
     on [aliasing input/output properties](#aliasing-io).
 
-    [别名input/output属性](#aliasing-io)章节有更多关于该`myClick`指令的解释。
+    更多关于该`myClick`指令的解释，见[给输入/输出属性起别名](#aliasing-io)。
 :marked
   If the name fails to match an element event or an output property of a known directive,
   Angular reports an “unknown directive” error.
 
-  如果这个名字没能匹配到元素事件或已知指令的输出型属性，Angular就会报“未知指令”错误。
+  如果这个名字没能匹配到元素事件或已知指令的输出属性，Angular 就会报“未知指令”错误。
 
   ### *$event* and event handling statements
-  ### *$event*和事件处理语句
+
+  ### *$event* 和事件处理语句
+
   In an event binding, Angular sets up an event handler for the target event.
 
-  在事件绑定中，Angular会为目标事件设置事件处理器。
+  在事件绑定中，Angular 会为目标事件设置事件处理器。
 
   When the event is raised, the handler executes the template statement.
   The template statement typically involves a receiver, which performs an action
@@ -1276,20 +1421,20 @@ block style-property-name-dart-diff
   into a model.
 
   当事件发生时，这个处理器会执行模板语句。
-  典型的模板语句通常涉及到那些针对事件想作出相应处理的接收器，例如从一个HTML控件中取得一个值，并存入一个模型。
+  典型的模板语句通常涉及到响应事件执行动作的接收器，例如从 HTML 控件中取得值，并存入模型。
 
   The binding conveys information about the event, including data values, through
   an **event object named `$event`**.
 
-  这种绑定会通过一个**名叫`$event`的事件对象**传达关于此事件的信息(包括数据值)。
+  绑定会通过**名叫`$event`的事件对象**传递关于此事件的信息（包括数据值）。
 
   The shape of the event object is determined by the target event.
   If the target event is a native DOM element event, then `$event` is a
   [DOM event object]( https://developer.mozilla.org/en-US/docs/Web/Events),
   with properties such as `target` and `target.value`.
 
-  事件对象的形态取决于目标事件。如果目标事件是一个原生DOM元素事件，
-  `$event`就是一个[DOM事件对象]( https://developer.mozilla.org/en-US/docs/Web/Events)，它有像`target`和`target.value`这样的属性。
+  事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件，
+  `$event`就是 [DOM事件对象]( https://developer.mozilla.org/en-US/docs/Web/Events)，它有像`target`和`target.value`这样的属性。
 
   Consider this example:
 
@@ -1299,60 +1444,61 @@ block style-property-name-dart-diff
   This code sets the input box `value` property by binding to the `firstName` property. To listen for changes to the value, the code binds to the input box's `input` event.
   When the user makes changes, the `input` event is raised, and the binding executes the statement within a context that includes the DOM event object, `$event`.
 
-  我们在把输入框的`value`绑定到`firstName`属性，并且我们正在通过绑定到输入框的`input`事件来监听更改。
-  当用户造成更改时，`input`事件被触发，并且在一个包含了DOM事件对象的`$event`的上下文中执行这条语句。
+  上面的代码在把输入框的`value`属性绑定到`firstName`属性。
+  要监听对值的修改，代码绑定到输入框的`input`事件。
+  当用户造成更改时，`input`事件被触发，并在包含了 DOM 事件对象 (`$event`) 的上下文中执行这条语句。
 
   To update the `firstName` property, the changed text is retrieved by following the path `$event.target.value`.
 
-  要更改`firstName`属性，就要通过路径`$event.target.value`来获取更改后的值。
+  要更新`firstName`属性，就要通过路径`$event.target.value`来获取更改后的值。
 
   If the event belongs to a directive (recall that components are directives), `$event` has whatever shape the directive decides to produce.
 
-  如果这个事件属于指令(回想一下：组件是指令的一种)，那么`$event`便具有指令中生成的形态(译注：比如inputs)。
+  如果事件属于指令（回想一下，组件是指令的一种），那么`$event`具体是什么由指令决定。
 
   <a id="eventemitter"></a>
   <a id="custom-event"></a>
   ### Custom events with *EventEmitter*
 
-  ### 使用*EventEmitter*实现自定义事件
+  ### 使用 *EventEmitter* 实现自定义事件
 
   Directives typically raise custom events with an Angular [EventEmitter](../api/core/index/EventEmitter-class.html).
   The directive creates an `EventEmitter` and exposes it as a property.
   The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload, which can be anything.
   Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
 
-  指令使用典型的Angular [EventEmitter](../api/core/index/EventEmitter-class.html)来触发自定义事件。
-  指令创建一个`EventEmitter`实例，并且把它作为一个属性暴露出来。
-  指令调用`EventEmitter.emit(payload)`来触发事件，传进去的消息载荷可以是任何东西。
-  父指令通过绑定到这个属性来监听这个事件，并且通过`$event`对象来访问这个载荷。
+  通常，指令使用 Angular [EventEmitter](../api/core/index/EventEmitter-class.html) 来触发自定义事件。
+  指令创建一个`EventEmitter`实例，并且把它作为属性暴露出来。
+  指令调用`EventEmitter.emit(payload)`来触发事件，可以传入任何东西作为消息载荷。
+  父指令通过绑定到这个属性来监听事件，并通过`$event`对象来访问载荷。
 
   Consider a `HeroDetailComponent` that presents hero information and responds to user actions.
   Although the `HeroDetailComponent` has a delete button it doesn't know how to delete the hero itself.
   The best it can do is raise an event reporting the user's delete request.
 
-  假设一个`HeroDetailComponent`，它展示英雄的信息，并响应用户的动作。
-  虽然`HeroDetailComponent`有一个删除按钮，但它自己并不知道该如何删除这个英雄。
-  最好的做法是触发一个事件来报告“删除用户”的请求。
+  假设`HeroDetailComponent`用于显示英雄的信息，并响应用户的动作。
+  虽然`HeroDetailComponent`包含删除按钮，但它自己并不知道该如何删除这个英雄。
+  最好的做法是触发事件来报告“删除用户”的请求。
 
   Here are the pertinent excerpts from that `HeroDetailComponent`:
 
-  这里是来自`HeroDetailComponent`的相关摘要：
+  下面的代码节选自`HeroDetailComponent`：
 +makeExample('template-syntax/ts/app/hero-detail.component.ts',
-'template-1', 'HeroDetailComponent.ts (template)')(format=".")
+'template-1', 'HeroDetailComponent.ts (模板)')(format=".")
 +makeExample('template-syntax/ts/app/hero-detail.component.ts',
-'deleteRequest', 'HeroDetailComponent.ts (delete logic)')(format=".")
+'deleteRequest', 'HeroDetailComponent.ts (删除逻辑)')(format=".")
 
 :marked
   The component defines a `deleteRequest` property that returns an `EventEmitter`.
   When the user clicks *delete*, the component invokes the `delete()` method, 
   telling the `EventEmitter` to emit a `Hero` object.
 
-  组件定义了一个`deleteRequest`属性，它是一个`EventEmitter`实例。(译注：`deleteRequest`属性是导出Output属性，是组件与父级组件交互的主要方式之一。参见[输入和输出属性](#input-and-output-properties)和[父组件监听子组件的事件](docs/ts/latest/cookbook/component-communication.html#!#child-to-parent)。我们需要用`@Output()`来装饰它，或者把它添加到组件元数据的`outputs`数组中，它才能在父级组件可见。)
-  当用户点击*删除*时，组件会调用`delete()`方法，这个方法告诉`EventEmitter`，发出一个`Hero`对象。
+  组件定义了`deleteRequest`属性，它是`EventEmitter`实例。
+  当用户点击*删除*时，组件会调用`delete()`方法，让`EventEmitter`发出一个`Hero`对象。
 
   Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
 
-  现在，想象作为宿主的父组件绑定到了`HeroDetailComponent`的`deleteRequest`事件。
+  现在，假设有个宿主的父组件，它绑定了`HeroDetailComponent`的`deleteRequest`事件。
 
 +makeExample('template-syntax/ts/app/app.component.html',
 'event-binding-to-component')(format=".")
@@ -1360,15 +1506,18 @@ block style-property-name-dart-diff
   When the `deleteRequest` event fires, Angular calls the parent component's `deleteHero` method,
   passing the *hero-to-delete* (emitted by `HeroDetail`) in the `$event` variable.
 
-  当`deleteRequest`事件触发时，Angular调用父组件的`deleteHero`方法，在`$event`变量中传入*要删除的英雄*(来自`HeroDetail`)。
+  当`deleteRequest`事件触发时，Angular 调用父组件的`deleteHero`方法，
+  在`$event`变量中传入*要删除的英雄*（来自`HeroDetail`）。
 
   ### Template statements have side effects
+
   ### 模板语句有副作用
+
   The `deleteHero` method has a side effect: it deletes a hero.
   Template statement side effects are not just OK, but expected.
 
-  `deleteHero`方法有一个副作用：它删除了一个英雄。
-  模板语句的副作用不仅没问题，反而正是我们所期待的。
+  `deleteHero`方法有副作用：它删除了一个英雄。
+  模板语句的副作用不仅没问题，反而正是所期望的。
 
   Deleting the hero updates the model, perhaps triggering other changes
   including queries and saves to a remote server.
@@ -1376,7 +1525,6 @@ block style-property-name-dart-diff
 
   删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。
   这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。
-  这都是好事。
 
 //-
   :marked
@@ -1413,7 +1561,7 @@ block style-property-name-dart-diff
 
   We often want to both display a data property and update that property when the user makes changes.
 
-  我们经常需要显示数据属性，并在用户作出更改时，更新数据属性及其显示。
+  我们经常需要显示数据属性，并在用户作出更改时更新该属性。
 
   On the element side that takes a combination of setting a specific element property
   and listening for an element change event.
@@ -1424,7 +1572,7 @@ block style-property-name-dart-diff
   The `[(x)]` syntax combines the brackets 
   of _property binding_, `[x]`, with the parentheses of _event binding_, `(x)`.
 
-  Angular为此提供一种特殊的_双向数据绑定_语法:**`[(x)]`**。
+  Angular 为此提供一种特殊的_双向数据绑定_语法：**`[(x)]`**。
   `[(x)]`语法结合了_属性绑定_的方括号`[x]`和_事件绑定_的圆括号`(x)`。
 
 .callout.is-important
@@ -1441,7 +1589,7 @@ block style-property-name-dart-diff
   Here's a `SizerComponent` that fits the pattern.
   It has a `size` value property and a companion `sizeChange` event:
 
-  当一个元素拥有可以设置的属性`x`和对应的事件`xChange`时，`[(x)]`语法是最容易被解释的。
+  当一个元素拥有可以设置的属性`x`和对应的事件`xChange`时，解释`[(x)]`语法就容易多了。
   下面的`SizerComponent`符合这个模式。它有`size`属性和伴随的`sizeChange`事件：
 
 +makeExample('app/sizer.component.ts')
@@ -1451,8 +1599,8 @@ block style-property-name-dart-diff
   Clicking the buttons increases or decreases the `size`, within min/max values constraints,
   and then raises (_emits_) the `sizeChange` event with the adjusted size.
 
-  `size`的初始值是通过属性绑定得来的输入框的`value`。
-  点击按钮，在最大/最小值范围限制内增加或者减少`size`。
+  `size`的初始值是一个输入值，来自属性绑定。（译注：注意`size`前面的`@Input`）
+  点击按钮，在最小/最大值范围限制内增加或者减少`size`。
   然后用调整后的`size`触发`sizeChange`事件。
 
   Here's an example in which the `AppComponent.fontSizePx` is two-way bound to the `SizerComponent`:
@@ -1467,9 +1615,10 @@ block style-property-name-dart-diff
   The revised `AppComponent.fontSizePx` value flows through to the _style_ binding, making the displayed text bigger or smaller.
   Try it in the <live-example></live-example>.
 
-  `AppComponent.fontSize`赋予`SizerComponent.size`初始值。点击按钮通过双向绑定更新`AppComponent.fontSize`。
-  被修改的`AppComponent.fontSize`通过_样式_绑定，改变文本的显示大小。
-  参见<live-example>在线例子</live-example>。
+  `SizerComponent.size`初始值是`AppComponent.fontSizePx`。
+  点击按钮时，通过双向绑定更新`AppComponent.fontSizePx`。
+  被修改的`AppComponent.fontSizePx`通过_样式_绑定，改变文本的显示大小。
+  试一下<live-example>在线例子</live-example>。
 
   The two-way binding syntax is really just syntactic sugar for a _property_ binding and an _event_ binding.
   Angular _desugars_ the `SizerComponent` binding into this:
@@ -1483,8 +1632,8 @@ block style-property-name-dart-diff
   The `$event` variable contains the payload of the `SizerComponent.sizeChange` event.
   Angular assigns the `$event` value to the `AppComponent.fontSizePx` when the user clicks the buttons.
 
-  `$event`变量包含了`SizerComponent.sizeChange`事件的有效荷载。
-  当用户点击按钮时，Angular将`$event`赋值给`AppComponent.fontSize`。
+  `$event`变量包含了`SizerComponent.sizeChange`事件的荷载。
+  当用户点击按钮时，Angular 将`$event`赋值给`AppComponent.fontSize`。
 
   Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.
 
@@ -1493,22 +1642,23 @@ block style-property-name-dart-diff
   We'd like to use two-way binding with HTML form elements like `<input>` and `<select>`.
   Sadly, no native HTML element follows the `x` value and `xChange` event pattern.
 
-  我们希望能在像`<input>`和`<select>`这样的HTML元素上使用双向数据绑定。可惜，原生HTML元素不自带像`x`值和`xChange`事件的模式。
+  我们希望能在像`<input>`和`<select>`这样的 HTML 元素上使用双向数据绑定。
+  可惜，原生 HTML 元素不遵循`x`值和`xChange`事件的模式。
 
   Fortunately, the Angular [_NgModel_](#ngModel) directive is a bridge that enables two-way binding to form elements.
 
-  幸运的是，Angular以[_NgModel_](#ngModel)指令为桥梁，让我们可以在表单元素上使用双向数据绑定。
+  幸运的是，Angular 以 [_NgModel_](#ngModel) 指令为桥梁，允许在表单元素上使用双向数据绑定。
 
 a#ngModel
 .l-main-section
 :marked
   ## Two-way binding with NgModel
 
-  ## 使用NgModel进行双向数据绑定
+  ## 使用 NgModel 进行双向数据绑定
 
   When developing data entry forms, we often want to both display a data property and update that property when the user makes changes.
 
-  当开发数据输入表单时，我们经常希望能显示数据属性，并在用户做出变更时，更新属性及其显示。
+  当开发数据输入表单时，我们经常希望能显示数据属性，并在用户做出变更时更新该属性。
 
   Two-way data binding with the `NgModel` directive makes that easy. Here's an example:
 
@@ -1518,15 +1668,18 @@ a#ngModel
 +ifDocsFor('ts|js')
   .callout.is-important
     header FormsModule is Required to use ngModel
-    header 要使用ngModel，必须导入FormsModule
+
+    header 要使用 ngModel，必须导入 FormsModule
+
     :marked
       Before we can use the `ngModel` directive in a two-way data binding,
       we must import the `FormsModule` and add it to the Angular module's `imports` list.
       Learn more about the `FormsModule` and `ngModel` in the
       [Forms](../guide/forms.html#ngModel) chapter.
 
-      要使用`ngModel`做双向数据绑定，得先把`FormsModule`导入我们的模块并把它加入`NgModule`装饰器的`imports`数组。
-      要学习关于`FormsModule`和`ngModel`的更多知识，参见[表单](../guide/forms.html#ngModel)一章。
+      在使用`ngModel`做双向数据绑定之前，得先导入`FormsModule`，
+      把它加入 Angular 模块的`imports`列表。
+      学习关于`FormsModule`和`ngModel`的更多知识，参见[表单](../guide/forms.html#ngModel)。
 
   :marked
     Here's how to import the `FormsModule` to make `[(ngModel)]` available.
@@ -1543,15 +1696,15 @@ a#ngModel
   we could have achieved the same result with separate bindings to
   the `<input>` element's  `value` property and `input` event.
 
-  回顾`firstName`的绑定，最值得注意的是，我们可以通过分别绑定`<input>`元素的`value`属性和`input事件来实现同样的效果。
+  回顾一下`firstName`的绑定，值得注意的是，可以通过分别绑定`<input>`元素的`value`属性和`input事件来实现同样的效果。
 +makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
 :marked
   That’s cumbersome. Who can remember which element property to set and which element event emits user changes?
   How do we extract the currently displayed text from the input box so we can update the data property?
   Who wants to look that up each time?
 
-  这样很笨拙。谁能记住哪个元素属性用于设置，哪个用于汇报用户更改？
-  我们如何从输入框中提取出当前显示的文本，以便更新数据属性？
+  这样很笨拙。谁能记住哪个元素属性用于设置，哪个用于发出用户更改？
+  如何从输入框中提取出当前显示的文本，以便更新数据属性？
   谁想每次都去查一遍？
 
   That `ngModel` directive hides these onerous details behind its own  `ngModel` input and `ngModelChange` output properties.
@@ -1563,45 +1716,47 @@ a#ngModel
     The `ngModel` data property sets the element's value property and the `ngModelChange` event property
     listens for changes to the element's value.
 
-    `ngModel`数据属性设置元素的`value`属性，并为元素`value`的变化而监听`ngModelChange`事件属性。
+    `ngModel`数据属性设置元素的 value 属性，`ngModelChange`事件属性监听元素 value 的变化。
 
     The details are specific to each kind of element and therefore the `NgModel` directive only works for specific form elements,
     such as the input text box, that are supported by a [ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html).
 
-    每种元素的特点各不相同，所以`NgModel`指令只能在一些特定表单元素上使用，例如输入框，因为它们支持[ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html)。
+    每种元素的特点各不相同，所以`NgModel`指令只能在一些特定表单元素上使用，例如输入文本框，因为它们支持 [ControlValueAccessor](../api/forms/index/ControlValueAccessor-interface.html)。
 
     We can't apply `[(ngModel)]` to a custom component until we write a suitable *value accessor*,
     a technique that is beyond the scope of this chapter.
     That's something we might want to do for an Angular component or a WebComponent whose API we can't control.
 
-    除非写一个合适的*值访问器*，否则我们不能把`[(ngModel)]`用在我们自己的自定义组件上。但*值访问器*技术超出了本章的范围。
-    对于不能控制其API的Angular组件或者Web组件，我们可能需要为其添加合适的*value accessor*。
+    除非写一个合适的*值访问器*，否则不能把`[(ngModel)]`用在自定义组件上。
+    但*值访问器*技术超出了本章的范围。
+    对于不能控制其 API 的 Angular 组件或者 Web 组件，可能需要为其添加 *value accessor*。
 
     It's completely unnecessary for an Angular component that we _do_ control ... because we can name the value and event properties
     to suit Angular's basic [two-way binding syntax](#two-way) and skip `NgModel` altogether.
 
-    但是对于我们能控制的Angular组件来说，这么做就完全没有必要了。因为我们可以指定值和事件属性名字来进行基本的Angular[双向绑定语法](#two-way)，完全不用`NgModel`。
+    但是对于我们能控制的 Angular 组件来说，这么做就完全没有必要了。
+    因为可以指定值和事件属性名字来进行基本的 Angular [双向绑定语法](#two-way)，完全不用`NgModel`。
 
 :marked
   Separate `ngModel` bindings is an improvement over binding to the element's native properties. We can do better.
 
-  把`ngModel`绑定分离开是一个提升，但我们还能做得更好。
+  独立的`ngModel`绑定相比直接绑定元素的原生属性是个改进，但还能做得更好。
 
   We shouldn't have to mention the data property twice. Angular should be able to capture the component’s data property and set it
   with a single declaration &mdash; which it can with the `[(ngModel)]` syntax:
 
-  我们不应该被迫两次提起数据属性。Angular应该能捕捉组件的数据属性并用一条声明来设置它——依靠`[(ngModel)]`，我们可以这么做：
+  我们不应该提及数据属性两次。Angular 应该能捕捉组件的数据属性，并用一条声明来设置它——依靠`[(ngModel)]`，可以这么做：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
 :marked
   Is `[(ngModel)]` all we need? Is there ever a reason to fall back to its expanded form?
 
-  `[(ngModel)]`就是我们所需的一切吗？有没有什么理由需要仰仗到它的展开形式？
+  `[(ngModel)]`就是我们所需的一切吗？有没有什么理由需要回退到它的展开形式？
 
   The `[(ngModel)]` syntax can only _set_ a data-bound property.
   If we need to do something more or something different, we need to write the expanded form ourselves.
 
   `[(ngModel)]`语法只能_设置_一个数据绑定属性。
-  如果需要做更多或不同的事情，我们得自己写它的展开形式。
+  如果需要做更多或不同的事情，就得自己用它的展开形式。
 
   Let's try something silly like forcing the input value to uppercase:
 
@@ -1618,22 +1773,23 @@ figure.image-display
 :marked
   <a id="directives"></a>
   ## Built-in directives
+
   ## 内置指令
 
   Earlier versions of Angular included over seventy built-in directives.
   The community contributed many more, and countless private directives
   have been created for internal applications.
 
-  前一个版本的Angular中包含了超过70个内置指令。
+  上一版本的 Angular 中包含了超过 70 个内置指令。
   社区贡献了更多，这还没算为内部应用而创建的无数私有指令。
 
   We don’t need many of those directives in Angular.
   Quite often we can achieve the same results with the more capable and expressive Angular binding system.
   Why create a directive to handle a click when we can write a simple binding such as this?
 
-  在Angular中我们不需要那么多指令。
-  使用更强大、更富有表现力的Angular绑定系统，我们其实可以达到同样的效果。
-  如果我们能用一个这样的简单绑定达到目的，为什么还需要创建一个指令来处理点击事件？
+  在新版的 Angular 中不需要那么多指令。
+  使用更强大、更富有表现力的 Angular 绑定系统，其实可以达到同样的效果。
+  如果能用简单的绑定达到目的，为什么还要创建指令来处理点击事件呢？
 +makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
 :marked
   We still benefit from directives that simplify complex tasks.
@@ -1641,12 +1797,12 @@ figure.image-display
   We'll write our own directives, just not as many.
 
   我们仍然可以从简化复杂任务的指令中获益。
-  Angular发布时仍然带有内置指令，只是没那么多了。
+  Angular 发布时仍然带有内置指令，只是没那么多了。
   我们仍会写自己的指令，只是没那么多了。
 
   This segment reviews some of the most frequently used built-in directives.
 
-  下面这部分就检阅一下那些最常用的内置指令。
+  下面来看一下那些最常用的内置指令。
 
 <a id="ngClass"></a>
 .l-main-section
@@ -1659,33 +1815,33 @@ figure.image-display
   by adding and removing CSS classes dynamically.
   We can bind to `NgClass` to add or remove several classes simultaneously.
 
-  我们经常用动态添加或删除CSS类的方式来控制元素如何显示。
-  通过绑定到`NgClass`，我们可以同时添加或移除多个类。
+  我们经常用动态添加或删除 CSS 类的方式来控制元素如何显示。
+  通过绑定到`NgClass`，可以同时添加或移除多个类。
 
   A [class binding](#class-binding) is a good way to add or remove a *single* class.
 
-  [CSS类绑定](#class-binding)是添加或删除*单个*类的最佳途径。
+  [CSS 类绑定](#class-binding) 是添加或删除*单个*类的最佳途径。
 +makeExample('template-syntax/ts/app/app.component.html', 'class-binding-3a')(format=".")
 :marked
   The `NgClass` directive may be the better choice
   when we want to add or remove *many* CSS classes at the same time.
 
-  当我们想要同时添加或移除*多个*CSS类时，`NgClass`指令可能是更好的选择。
+  当想要同时添加或移除*多个* CSS 类时，`NgClass`指令可能是更好的选择。
 
   A good way to apply `NgClass` is by binding it to a key:value control !{__objectAsMap}. Each key of the object is a CSS class name; its value is `true` if the class should be added, `false` if it should be removed.
 
-  绑定到一个 key:value 形式的控制对象，是应用`NgClass`的好方式。这个对象中的每个key都是一个CSS类名，如果它的value是`true`，这个类就会被加上，否则就会被移除。
+  绑定到一个 key:value 形式的控制对象，是应用`NgClass`的好方式。这个对象中的每个 key 都是一个 CSS 类名，如果它的 value 是`true`，这个类就会被加上，否则就会被移除。
 
 :marked
   Consider a component method such as `setClasses` that manages the state of three CSS classes:
 
-  考虑一个像`setClasses`这样的组件方法，用于管理三个CSS类的状态。
+  下面的组件方法`setClasses`管理了三个 CSS 类的状态：
 +makeExample('template-syntax/ts/app/app.component.ts', 'setClasses')(format=".")
 :marked
   Now we can add an `NgClass` property binding that calls `setClasses`
   and sets the element's classes accordingly:
 
-  现在，我们可以添加一个`NgClass`属性绑定，它会调用`setClasses`，并据此设置元素的类：
+  现在，可以添加`NgClass`属性绑定，它会调用`setClasses`，并相应地设置元素的类：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgClass-1')(format=".")
 
 <a id="ngStyle"></a>
@@ -1698,8 +1854,8 @@ figure.image-display
   We can set inline styles dynamically, based on the state of the component.
   Binding to `NgStyle` lets us set many inline styles simultaneously.
 
-  我们可以基于组件的状态动态设置内联样式。
-  绑定到`NgStyle`可以让我们同时设置很多内联样式。
+  我们可以根据组件的状态动态设置内联样式。
+  `NgStyle`绑定可以同时设置多个内联样式。
 
   A [style binding](#style-binding) is an easy way to set a *single* style value.
 
@@ -1709,23 +1865,23 @@ figure.image-display
   The `NgStyle` directive may be the better choice
   when we want to set *many* inline styles at the same time.
 
-  如果我们要同时设置*多个*内联样式，`NgStyle`指令可能是更好的选择。
+  如果要同时设置*多个*内联样式，`NgStyle`指令可能是更好的选择。
 
   We apply `NgStyle` by binding it to a key:value control !{__objectAsMap}.
   Each key of the object is a style name; its value is whatever is appropriate for that style.
 
-  我们通过把它绑定到一个 key:value 控制对象的形式使用`NgStyle`。
-  对象的每个key是样式名，它的value就是能用于这个样式的任何值。
+  `NgStyle`需要绑定到一个 key:value 控制对象。
+  对象的每个 key 是样式名，它的 value 是能用于这个样式的任何值。
 
   Consider a component method such as `setStyles` that returns an object defining three styles:
 
-  考虑一个类似于`setStyles`的组件方法，它返回一个定义三种样式的对象：
+  下面的组件方法`setStyles`，返回一个定义了三种样式的对象：
 +makeExample('template-syntax/ts/app/app.component.ts', 'setStyles')(format=".")
 :marked
   Now we just add an `NgStyle` property binding that calls `setStyles`
   and sets the element's styles accordingly:
 
-  现在我们添加一个`NgStyle`属性绑定，让它调用`setStyles`，并据此设置元素的样式：
+  现在添加`NgStyle`属性绑定，让它调用`setStyles`，并相应地设置元素的样式：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgStyle-2')(format=".")
 
 <a id="ngIf"></a>
@@ -1737,7 +1893,7 @@ figure.image-display
 
   We can add an element subtree (an element and its children) to the DOM  by binding an `NgIf` directive to a #{_truthy} expression.
 
-  通过把`NgIf`指令绑定到一个真值表达式，我们可以把一个元素的子树(元素及其子元素)添加到DOM上。
+  通过绑定`NgIf`指令到真值表达式，可以把元素子树（元素及其子元素）添加到 DOM 上。
 +makeExample('template-syntax/ts/app/app.component.html', 'NgIf-1')(format=".")
 
 .alert.is-critical
@@ -1745,12 +1901,12 @@ figure.image-display
     Don't forget the asterisk (`*`) in front of `ngIf`.
     For more information, see [\* and &lt;template>](#star-template).
 
-    不要忘记了`ngIf`前面的星号(`*`)。
-    要了解更多，参见[\*与&lt;template>](#star-template)。
+    别忘了`ngIf`前面的星号(`*`)。
+    更多信息，见 [\* 与 &lt;template>](#star-template)。
 :marked
   Binding to a #{_falsey} expression removes the element subtree from the DOM.
 
-  绑定到一个假值表达式将从DOM中移除元素的子树。
+  绑定到假值表达式将从 DOM 中移除元素子树。
 +makeExample('template-syntax/ts/app/app.component.html', 'NgIf-2')(format=".")
 
 block dart-no-truthy-falsey
@@ -1764,34 +1920,34 @@ block dart-no-truthy-falsey
   We can show and hide an element subtree (the element and its children) with a
   [class](#class-binding) or [style](#style-binding) binding:
 
-  我们可以通过[类绑定](#class-binding)或[样式绑定](#style-binding)来显示和隐藏一个元素的子树(元素及其子元素)。
+  我们可以通过[类绑定](#class-binding)或[样式绑定](#style-binding)来显示和隐藏元素子树（元素及其子元素）。
 +makeExample('template-syntax/ts/app/app.component.html', 'NgIf-3')(format=".")
 :marked
   Hiding a subtree is quite different from excluding a subtree with `NgIf`.
 
-  隐藏一个子树和用`NgIf`排除一个子树是截然不同的。
+  隐藏子树和用`NgIf`排除子树是截然不同的。
 
   When we hide the element subtree, it remains in the DOM.
   Components in the subtree are preserved, along with their state.
   Angular may continue to check for changes even to invisible properties.
   The subtree may tie up substantial memory and computing resources.
 
-  当我们隐藏一个子树时，它仍然留在DOM中。
+  当隐藏子树时，它仍然留在 DOM 中。
   子树中的组件及其状态仍然保留着。
-  即使对于不可见属性，Angular也会继续检查变更。
+  即使对于不可见属性，Angular 也会继续检查变更。
   子树可能占用相当可观的内存和运算资源。
 
   When `NgIf` is `false`, Angular physically removes the element subtree from the DOM.
   It destroys components in the subtree, along with their state, potentially freeing up substantial resources and
   resulting in better performance for the user.
 
-  当`NgIf`为`false`时，Angular从DOM中实际移除了这个元素的子树。
+  当`NgIf`为`false`时，Angular 从 DOM 中物理地移除了这个元素子树。
   它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。
 
   The show/hide technique is probably fine for small element trees.
   We should be wary when hiding large trees; `NgIf` may be the safer choice. Always measure before leaping to conclusions.
 
-  显示/隐藏技术用在小型元素树上可能还不错。
+  显示 / 隐藏技术用在小型元素树上可能还不错。
   但在隐藏大树时我们得小心；`NgIf`可能是更安全的选择。但要记住：永远得先测量，再下结论。
 
 <a id="ngSwitch"></a>
@@ -1806,7 +1962,7 @@ block dart-no-truthy-falsey
   Angular puts only the *selected* element tree into the DOM.
 
   当需要从*一组*可能的元素树中根据条件显示*一个*时，我们就把它绑定到`NgSwitch`。
-  Angular将只把*选中的*元素树放进DOM中。
+  Angular 将只把*选中的*元素树放进 DOM 中。
 
   Here’s an example:
 
@@ -1816,26 +1972,26 @@ block dart-no-truthy-falsey
   We bind the parent `NgSwitch` directive to an expression returning a *switch value*.
   The value is a string in this example, but it can be a value of any type.
 
-  我们把作为父指令的`NgSwitch`绑定到一个能返回*开关值*的表达式。
-  本例中，这个值是字符串，但它也可能是任何类型的值。
+  我们把作为父指令的`NgSwitch`绑定到能返回*开关值*的表达式。
+  本例中，这个值是字符串，但它也可以是任何类型的值。
 
   In this example, the parent `NgSwitch` directive controls a set of child `<span>` elements.
   A `<span>` is either pegged to a *match value* expression or marked as the default.
 
   这个例子中，父指令`NgSwitch`控制一组`<span>`子元素。
-  每个`<span>`或者挂在一个*匹配值*表达式上，或者被标记为默认情况。
+  每个`<span>`或者挂在*匹配值*表达式上，或者被标记为默认情况。
 
   **At any particular moment, at most one of these *spans* is in the DOM.**
 
-  **任何时候，这些*span*中最多只有一个会出现在DOM中。**
+  **任何时候，这些 *span* 中最多只有一个会出现在 DOM 中。**
 
   If the *span*’s *match value* equals the switch value, Angular adds the `<span>` to the DOM.
   If none of the *spans* is a match, Angular adds the default *span* to the DOM.
   Angular removes and destroys all other *spans*.
 
-  如果这个*span*的*匹配值*与*开关值*相等，Angular就把这个`<span>`添加到DOM中。
-  如果没有任何*span*匹配上，Angular就把默认的*span*添加到DOM中。
-  Angular会移除并销毁所有其它的*span*。
+  如果这个 *span* 的*匹配值*等于*开关值*，Angular 就把这个`<span>`添加到 DOM 中。
+  如果没有任何 *span* 匹配上，Angular 就把默认的 *span* 添加到 DOM 中。
+  Angular 会移除并销毁所有其它的 *span*。
 .l-sub-section
   :marked
     We could substitute any element for the *span* in this example.
@@ -1843,31 +1999,36 @@ block dart-no-truthy-falsey
     Only the matching `<div>` and its subtree would appear in the DOM;
     the others would be removed.
 
-    我们可以用任何其它元素代替本例中的*span*。
-    那个元素可以是一个带有巨大子树的`<div>`。
-    只有匹配的`<div>`和它的子树会显示在DOM中，其它的则会被移除。
+    可以用任何其它元素代替本例中的 *span*。
+    那个元素可以是带有巨大子树的`<div>`。
+    只有匹配的`<div>`和它的子树会显示在 DOM 中，其它的则会被移除。
 :marked
   Three collaborating directives are at work here:
 
   这里有三个相互合作的指令：
   1. `ngSwitch`: bound to an expression that returns the switch value
-  1. `ngSwitch`：绑定到一个返回开关值的表达式
+
+     `ngSwitch`：绑定到返回开关值的表达式
+
   1. `ngSwitchCase`: bound to an expression returning a match value
-  1. `ngSwitchCase`：绑定到一个返回匹配值的表达式
+
+     `ngSwitchCase`：绑定到返回匹配值的表达式
+
   1. `ngSwitchDefault`: a marker attribute on the default element
-  1. `ngSwitchDefault`：一个用于标记出默认元素的Attribute
+
+     `ngSwitchDefault`：用于标记出默认元素的 attribute
 
 .alert.is-critical
   :marked
     **Do *not*** put the asterisk (`*`) in front of `ngSwitch`. Use the property binding instead.
 
-    **不要**在`ngSwitch`的前面放星号(`*`)，而应该用属性绑定。
+    **不要**在`ngSwitch`的前面加星号 (`*`)，而应该用属性绑定。
 
     **Do** put the asterisk (`*`) in front of `ngSwitchCase` and `ngSwitchDefault`.
     For more information, see [\* and &lt;template>](#star-template).
 
-    **要**把星号(`*`)放在`ngSwitchCase`和`ngSwitchDefault`的前面。
-    要了解更多信息，参见[\*与&lt;template>](#star-template)。
+    **要**把星号 (`*`) 放在`ngSwitchCase`和`ngSwitchDefault`的前面。
+    要了解更多信息，见[ \* 与 &lt;template>](#star-template)。
 
 <a id="ngFor"></a>
 .l-main-section
@@ -1883,17 +2044,17 @@ block dart-no-truthy-falsey
   Our goal is to present a list of items. We define a block of HTML that defines how a single item should be displayed.
   We tell Angular to use that block as a template for rendering each item in the list.
 
-  我们的目标是展示一个由多个条目组成的列表。我们定义了一个HTML块，它规定了单个条目应该如何显示。
-  我们告诉Angular把这个块当做模板，渲染列表中的每个条目。
+  我们的目标是展示一个由多个条目组成的列表。首先定义了一个 HTML 块，它规定了单个条目应该如何显示。
+  再告诉 Angular 把这个块当做模板，渲染列表中的每个条目。
 
   Here is an example of `NgFor` applied to a simple `<div>`:
 
-  这里是一个例子，它把`NgFor`应用在一个简单的`<div>`上：
+  下例中，`NgFor`应用在一个简单的`<div>`上：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgFor-1')(format=".")
 :marked
   We can also apply an `NgFor` to a component element, as in this example:
 
-  我们也可以把`NgFor`应用在一个组件元素上，就像这个例子中一样：
+  也可以把`NgFor`应用在一个组件元素上，就下例这样：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgFor-2')(format=".")
 
 .alert.is-critical
@@ -1901,43 +2062,44 @@ block dart-no-truthy-falsey
     Don't forget the asterisk (`*`) in front of `ngFor`.
     For more information, see [\* and &lt;template>](#star-template).
 
-    不要忘了`ngFor`前面的星号(`*`)。
-    要了解更多，参见[\*与&lt;template>](#star-template)
+    不要忘了`ngFor`前面的星号 (`*`)。
+    更多信息，见[ \* 与 &lt;template>](#star-template)
 :marked
   The text assigned to `*ngFor` is the instruction that guides the repeater process.
 
-  赋值给`*ngFor`的文本是一个用于指导重复器如何工作的“操作指南”。
+  赋值给`*ngFor`的文本是用于指导重复器如何工作的指令。
 
 <a id="ngForMicrosyntax"></a>
 :marked
   #### NgFor microsyntax
 
-  #### NgFor微语法
+  #### NgFor 微语法
 
   The string assigned to `*ngFor` is not a [template expression](#template-expressions).
   It’s a *microsyntax* &mdash; a little language of its own that Angular interprets. In this example, the string `"let hero of heroes"` means:
 
-  赋值给`*ngFor`的字符串并不是一个[模板表达式](#template-expressions)。
-  它是一个*微语法* —— 由Angular自己解释的小型语言。在这个例子中，字符串`"let hero of heroes"`的含义是：
+  赋值给`*ngFor`的字符串不是[模板表达式](#template-expressions)。
+  它是一个*微语法* —— 由 Angular 自己解释的小型语言。在这个例子中，字符串`"let hero of heroes"`的含义是：
 
   > *Take each hero in the `heroes` #{_array}, store it in the local `hero` variable, and make it available to the templated HTML for each iteration.*
 
-  > *取出`heroes`数组中的每个英雄，把它存在一个局部变量`hero`中，并且在每个迭代中让它对模板HTML可用*
+  > *取出`heroes`数组中的每个英雄，把它存入局部变量`hero`中，并在每次迭代时对模板 HTML 可用*
 
   Angular translates this instruction into a new set of elements and bindings.
 
-  Angular把这份“操作指南”翻译成一组“元素和绑定”。
+  Angular 把这个指令翻译成一组元素和绑定。
 :marked
   In the two previous examples, the `ngFor` directive iterates over the `heroes` #{_array} returned by the parent component’s `heroes` property,
   stamping out instances of the element to which it is applied.
   Angular creates a fresh instance of the template for each hero in the array.
 
-  在前面的两个例子中，`ngFor`指令在`heroes`变量上进行迭代(它是由父组件的`heroes`属性返回的)，以其所在的元素为模板“冲压”出很多实例。
-  Angular为数组中的每个英雄创建了此模板的一个全新实例。
+  在前面的两个例子中，`ngFor`指令在`heroes`数组上进行迭代（它是由父组件的`heroes`属性返回的），
+  以其所在的元素为模板“冲压”出很多实例。
+  Angular 为数组中的每个英雄创建了此模板的一个全新实例。
 
   The `let` keyword before `hero` creates a template input variable called `hero`.
 
-  `hero`前面的`let`关键字创建了一个名叫`hero`的模板输入变量。
+  `hero`前面的`let`关键字创建了名叫`hero`的模板输入变量。
 
 .alert.is-critical
   :marked
@@ -1951,29 +2113,29 @@ block dart-no-truthy-falsey
   We can also pass the variable in a binding to a component element,
   as we're doing with `hero-detail`.
 
-  我们在模板中使用这个变量来访问英雄的属性，就像在插值表达式中所做的那样。
-  我们也可以把这个变量传给组件元素上的一个绑定，就像我们对`hero-detail`所做的那样。
+  在模板中使用这个变量来访问英雄的属性，就像在插值表达式中所做的那样。
+  也可以把这个变量传给组件元素上的绑定，就像对`hero-detail`所做的那样。
 
 :marked
   #### NgFor with index
 
-  #### 带索引的NgFor
+  #### 带索引的 NgFor
 
   The `ngFor` directive supports an optional `index` that increases from 0 to the length of the array for each iteration.
   We can capture the index in a template input variable and use it in our template.
 
-  `ngFor`指令支持一个可选的`index`，它在迭代过程中会从0增长到“当前数组的长度”。
-  我们可以通过模板输入变量来捕获这个index，并把它用在模板中。
+  `ngFor`指令支持可选的`index`，它在迭代过程中会从 0 增长到“数组的长度”。
+  可以通过模板输入变量来捕获这个 index，并在模板中使用。
 
   The next example captures the index in a variable named `i`, using it to stamp out rows like "1 - Hercules Son of Zeus".
 
-  下一个例子把index捕获到了一个名叫`i`的变量中，使用它“冲压出”像"1 - Hercules Son of Zeus"这样的条目。
+  下例把 index 捕获到名叫`i`的变量中，使用它“冲压出”像 "1 - Hercules Son of Zeus" 这样的条目。
 +makeExample('template-syntax/ts/app/app.component.html', 'NgFor-3')(format=".")
 .l-sub-section
   :marked
     Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/index/NgFor-directive.html).
 
-    要学习更多的*类似index*的值，例如`last`、`even`和`odd`，请参阅[NgFor API 参考](../api/common/index/NgFor-directive.html)。
+    要学习更多的*类似 index* 的值，例如`last`、`even`和`odd`，请参阅 [NgFor API 参考](../api/common/index/NgFor-directive.html)。
 
 :marked
   #### NgForTrackBy
@@ -1984,26 +2146,27 @@ block dart-no-truthy-falsey
   A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations.
 
   `ngFor`指令有时候会性能较差，特别是在大型列表中。
-  对一个条目的一点小更改、移除或添加，都会导致级联的DOM操作。
+  对一个条目的一丁点改动、移除或添加，都会导致级联的 DOM 操作。
 
   For example, we could refresh the list of heroes by re-querying the server.
   The refreshed list probably contains most, if not all, of the previously displayed heroes.
 
   例如，我们可以通过重新从服务器查询来刷新英雄列表。
-  刷新后的列表可能包含很多(如果不是全部的话)以前显示过的英雄。
+  刷新后的列表可能包含很多（如果不是全部的话）以前显示过的英雄。
 
   *We* know this because the `id` of each hero hasn't changed.
   But Angular sees only a fresh list of new object references.
   It has no choice but to tear down the old list, discard those DOM elements, and re-build a new list with new DOM elements.
 
   *我们*知道这一点，是因为每个英雄的`id`没有变化。
-  但在Angular看来，它只是一个由新的对象引用构成的新列表，
-  所以它没有选择，只能清理老列表、舍弃那些DOM元素，并且用新的DOM元素来重建一个新列表。
+  但在 Angular 看来，它只是一个由新的对象引用构成的新列表，
+  它没有选择，只能清理旧列表、舍弃那些 DOM 元素，并且用新的 DOM 元素来重建一个新列表。
 
   Angular can avoid this churn if we give it a *tracking* function that tells it what we know:
   that two objects with the same `hero.id` are the same *hero*. Here is such a function:
 
-  如果我们给它一个*追踪*函数，Angular就可以避免这种折腾。追踪函数告诉Angular：我们知道两个具有相同`hero.id`的对象其实是同一个英雄。
+  如果给它一个*追踪*函数，Angular 就可以避免这种折腾。
+  追踪函数告诉 Angular：我们知道两个具有相同`hero.id`的对象其实是同一个英雄。
   下面就是这样一个函数：
 +makeExample('template-syntax/ts/app/app.component.ts', 'trackByHeroes')(format=".")
 :marked
@@ -2019,14 +2182,14 @@ block dart-no-truthy-falsey
   But if the properties haven't changed &mdash; and most of the time they will not have changed &mdash;
   Angular can leave those DOM elements alone. The list UI will be smoother and more responsive.
 
-  *追踪*函数不会排除所有DOM更改。
-  如果用来判断是否同一个英雄的*属性*变化了，Angular就可能不得不更新DOM元素。
+  *追踪*函数不会乐队所有 DOM 更改。
+  如果同一个英雄的*属性*变化了，Angular 就可能不得不更新DOM元素。
   但是如果这个属性没有变化 —— 而且大多数时候它们不会变化 ——
-  Angular就能留下这些DOM元素。列表界面就会更加平滑，提供更好的响应。
+  Angular 就能留下这些 DOM 元素。列表界面就会更加平滑，提供更好的响应。
 
   Here is an illustration of the `NgForTrackBy` effect.
 
-  这里是关于`NgForTrackBy`效果的一个插图。
+  这里是关于`NgForTrackBy`效果的插图。
 figure.image-display
   img(src='/resources/images/devguide/template-syntax/ng-for-track-by-anim.gif' alt="NgForTrackBy")
 
@@ -2035,27 +2198,30 @@ figure.image-display
 .l-main-section
 :marked
   ## * and &lt;template&gt;
-  ## *与&lt;template&gt;
+
+  ## * 与 &lt;template&gt;
+
   When we reviewed the `NgFor`, `NgIf`, and `NgSwitch` built-in directives, we called out an oddity of the syntax: the asterisk (`*`) that appears before the directive names.
 
-  当我们审视`NgFor`、`NgIf`和`NgSwitch`内置指令时，我们使用了一种古怪的语法：出现在指令名称前面的星号(`*`)。
+  当审视`NgFor`、`NgIf`和`NgSwitch`这些内置指令时，我们使用了一种古怪的语法：出现在指令名称前面的星号 (`*`)。
 
   The `*` is a bit of syntactic sugar that makes it easier to read and write directives that modify HTML layout
   with the help of templates.
   `NgFor`, `NgIf`, and `NgSwitch` all add and remove element subtrees that are wrapped in `<template>` tags.
 
-  `*`是一种语法糖，它让那些需要借助模板来修改HTML布局的指令更易于读写。
+  `*`是一种语法糖，它让那些需要借助模板来修改 HTML 布局的指令更易于读写。
   `NgFor`、`NgIf`和`NgSwitch`都会添加或移除元素子树，这些元素子树被包裹在`<template>`标签中。
 
   We didn't see the `<template>` tags because the `*` prefix syntax allowed us to skip those tags and
   focus directly on the HTML element that we are including, excluding, or repeating.
 
-  我们没有看到`<template>`标签，那是因为这种`*`前缀语法让我们忽略了这个标签，而把注意力直接聚焦在所要包含、排除或重复的那些HTML元素上。
+  我们没有看到`<template>`标签，那是因为这种`*`前缀语法让我们忽略了这个标签，
+  而把注意力直接聚焦在所要包含、排除或重复的那些 HTML 元素上。
 
   In this section we go under the hood and see how
   Angular strips away the `*` and expands the HTML into the `<template>` tags for us.
 
-  在这一节，我们将掀开引擎盖，看看Angular是怎样替我们扒掉这个`*`，并且把这段HTML展开到`<template>`标签中的。
+  这一节，将深入研究一下，看看 Angular 是怎样扒掉这个`*`，把这段 HTML 展开到`<template>`标签中的。
 
 :marked
   ### Expanding `*ngIf`
@@ -2064,23 +2230,23 @@ figure.image-display
 
   We can do what Angular does ourselves and expand the `*` prefix syntax to template syntax. Here's some code with `*ngIf`:
 
-  我们可以像Angular一样，自己把`*`前缀语法展开成template语法，这里是`*ngIf`的一些代码：
+  我们可以像 Angular 一样，自己把`*`前缀语法展开成 template 语法，这里是`*ngIf`的一些代码：
 +makeExample('template-syntax/ts/app/app.component.html', 'Template-1')(format=".")
 :marked
   The `currentHero` is referenced twice, first as the true/false condition for `NgIf` and
   again as the actual hero passed into the `HeroDetailComponent`.
 
-  `currentHero`被引用了两次，第一次是作为`NgIf`的真/假条件，第二次把实际的hero值传给了`HeroDetailComponent`。
+  `currentHero`被引用了两次，第一次是作为`NgIf`的真 / 假条件，第二次把实际的 hero 值传给了`HeroDetailComponent`。
 
   The first expansion step transports the `ngIf` (without the `*` prefix) and its contents
   into an expression assigned to a `template` directive.
 
-  展开的第一步是把`ngIf`(没有`*`前缀)和它的内容传给一个表达式，再赋值给`template`指令。
+  展开的第一步是把`ngIf`（没有`*`前缀）和它的内容传给表达式，再赋值给`template`指令。
 +makeExample('template-syntax/ts/app/app.component.html', 'Template-2a')(format=".")
 :marked
   The next (and final) step unfolds the HTML into a `<template>` tag and `[ngIf]` [property binding](#property-binding):
 
-  下一步，也就是最后一步，是把HTML包裹进`<template>`标签和一个`[ngIf]`[属性绑定](#property-binding)中：
+  下一步，也是最后一步，是把 HTML 包裹进`<template>`标签和`[ngIf]`[属性绑定](#property-binding)中：
 +makeExample('template-syntax/ts/app/app.component.html', 'Template-2')(format=".")
 :marked
   Notice that the `[hero]="currentHero"` binding remains on the child `<hero-detail>`
@@ -2091,7 +2257,7 @@ figure.image-display
 block remember-the-brackets
   .callout.is-critical
     header Remember the brackets!
-    header 别忘了括号！
+    header 别忘了方括号！
     :marked
       Don’t make the mistake of writing `ngIf="currentHero"`!
       That syntax assigns the *string* value `"currentHero"` to `ngIf`.
@@ -2101,7 +2267,7 @@ block remember-the-brackets
 
       不要误写为`ngIf="currentHero"`！
       这种语法会把一个字符串"currentHero"赋值给`ngIf`。
-      在JavaScript中，非空的字符串是真值，所以`ngIf`总会是`true`，而Angular将永远显示`hero-detail`…… 即使根本没有`currentHero`！
+      在 JavaScript 中，非空的字符串是真值，所以`ngIf`总会是`true`，而 Angular 将永远显示`hero-detail`…… 即使根本没有`currentHero`！
 
 :marked
   ### Expanding `*ngSwitch`
@@ -2111,8 +2277,8 @@ block remember-the-brackets
   A similar transformation applies to `*ngSwitch`. We can unfold the syntax ourselves.
   Here's an example, first with `*ngSwitchCase` and `*ngSwitchDefault` and then again with `<template>` tags:
 
-  类似的转换也作用于`*ngSwitch`上。我们可以自己解开这个语法糖。
-  这里是一个例子，首先是`*ngSwitchCase`和`*ngSwitchDefault`，然后再解出`<template>`标签：
+  类似的转换也适用于`*ngSwitch`。我们可以自己解开这个语法糖。
+  下例中，首先是`*ngSwitchCase`和`*ngSwitchDefault`，然后再解出`<template>`标签：
 +makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
 :marked
   The `*ngSwitchCase` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
@@ -2123,7 +2289,7 @@ block remember-the-brackets
   Now we can see why the `ngSwitch` itself is not prefixed with an asterisk (*).
   It does not define content. It's job is to control a collection of templates.
 
-  现在，我们应该明白为什么`ngSwitch`本身不能用星号(*)前缀的原因了吧？
+  现在，应该明白为什么`ngSwitch`本身不能用星号 (*) 前缀了吧？
   它没有定义内容，它的工作是控制一组模板。
 
   In this case, it governs two sets of `ngSwitchCase` and `NgSwitchDefault` directives.
@@ -2131,8 +2297,8 @@ block remember-the-brackets
   once for the (*) prefixed version and once for the expanded template version.
   That's exactly what we see in this example:
 
-  上面这种情况下，它管理两组`NgSwitchCase`和`NgSwitchDefault`指令，一次是(*)前缀的版本，一次是展开模板后的版本。
-  我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的：
+  上面这种情况下，它管理两组`NgSwitchCase`和`NgSwitchDefault`指令，一次是 (*) 前缀的版本，一次是展开模板后的版本。
+  我们也期待它显示所选模板的值两次。这正是在这个例子中看到的：（译注：下图是错误的，应显示两次）
 figure.image-display
     img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
 :marked
@@ -2142,7 +2308,7 @@ figure.image-display
 
   The `*ngFor` undergoes a similar transformation. We begin with an `*ngFor` example:
 
-  `*ngFor`要经历类似的转换。我们从一个`*ngFor`的例子开始：
+  `*ngFor`也经历类似的转换。从一个`*ngFor`的例子开始：
 +makeExample('template-syntax/ts/app/app.component.html', 'Template-3a')(format=".")
 :marked
   Here's the same example after transporting the `ngFor` to the `template` directive:
@@ -2152,16 +2318,16 @@ figure.image-display
 :marked
   And here it is expanded further into a `<template>` tag wrapping the original `<hero-detail>` element:
 
-  这里，它被进一步扩展成了包裹着原始`<hero-detail>`元素的`<template>`标签：
+  下面，它被进一步扩展成了包裹着原始`<hero-detail>`元素的`<template>`标签：
 +makeExample('template-syntax/ts/app/app.component.html', 'Template-4')(format=".")
 :marked
   The `NgFor` code is a bit more complex than `NgIf` because a repeater has more moving parts to configure.
   In this case, we have to remember to create and assign the `NgForOf` directive that identifies the list and the `NgForTrackBy` directive.
   Using the `*ngFor` syntax is much easier than writing out this expanded HTML ourselves.
 
-  `NgFor`的代码相对`NgIf`更复杂一点，因为一个重复器有更多活动部分需要配置。
-  这种情况下，我们不得不记着为用于标记列表的`NgForOf`指令和`NgForTrackBy`指令的进行新建和赋值操作。
-  使用`*ngFor`语法比直接写这些展开后的HTML本身要简单多了。
+  `NgFor`的代码相对`NgIf`更复杂一点，因为重复器有更多活动部分需要配置。
+  这种情况下，我们就得记住添加`NgForOf`指令和`NgForTrackBy`指令，并对它们赋值。
+  使用`*ngFor`语法比直接写这些展开后的 HTML 本身要简单多了。
 
 <a id="ref-vars"></a>
 .l-main-section
@@ -2172,44 +2338,45 @@ figure.image-display
 
   A **template reference variable** is a reference to a DOM element or directive within a template.
 
-  **模板引用变量**是模板中对DOM元素或指令的引用。
+  **模板引用变量**是模板中对 DOM 元素或指令的引用。
 
   It can be used with native DOM elements but also with Angular components &mdash; in fact, it will work with any custom web component.
 
-  它能在原生DOM元素中使用，也能用于Angular组件 —— 实际上，它可以和任何自定义Web组件协同工作。
+  它能在原生 DOM 元素中使用，也能用于 Angular 组件 —— 实际上，它可以和任何自定义 Web 组件协同工作。
 
 :marked
   ### Referencing a template reference variable
 
-  ### 引用一个模板引用变量
+  ### 引用模板引用变量
 
   We can refer to a template reference variable _anywhere_ in the current template.
 
-  我们可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。
+  可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。
 
 .l-sub-section
   :marked
     Do not define the same variable name more than once in the same template.
     The runtime value will be unpredictable.
 
-    不要在同一个模版中多次定义同一个变量名，否则运行时的值将会不可预测。
+    不要在同一个模版中多次定义相同变量名，否则运行时的值将会不可预测。
 
 :marked
   Here are two other examples of creating and consuming a Template reference variable:
 
-  这里是关于创建和消费模板引用变量的另外两个例子：
+  这里是关于创建和使用模板引用变量的另外两个例子：
 +makeExample('template-syntax/ts/app/app.component.html', 'ref-phone')(format=".")
 :marked
   The hash (`#`) prefix to "phone" means that we're defining a `phone` variable.
 
-  "phone"的(`#`)前缀意味着我们将要定义一个`phone`变量。
+  "phone" 的井号 (`#`) 前缀表示定义了一个`phone`变量。
 .l-sub-section
   :marked
     Folks who don't like using the `#` character can use its canonical alternative,
     the `ref-` prefix. For example, we can declare the our `phone` variable using
     either `#phone` or `ref-phone`.
 
-    有些人不喜欢使用`#`字符，而是使用它的规范形式：`ref-`前缀。例如，我们既能用`#phone`，也能用`ref-phone`来定义我们的`phone`变量。
+    有些人不喜欢使用`#`字符，而是使用它的规范形式：`ref-`前缀。
+    例如，既能用`#phone`，也能用`ref-phone`来定义`phone`变量。
 
 :marked
   ### How a variable gets its value
@@ -2221,30 +2388,30 @@ figure.image-display
   We’re passing those `input` element objects across to the
   button elements, where they're used in arguments to the `call` methods in the event bindings.
 
-  Angular把这种变量的值设置为它所在的那个元素。
-  我们在这个`input`元素上定义了这些变量。
-  我们把那些`input`元素对象传给button元素，在这里，它们被当做参数传给了事件绑定中的`call`方法。
+  Angular 把这种变量的值设置为它所在的那个元素。
+  在这个`input`元素上定义了这些变量。
+  把那些`input`元素对象传给 button 元素，在事件绑定中，它们作为参数传给了`call`方法。
 
 :marked
   ### NgForm and template reference variables
 
-  ### NgForm和模板引用变量
+  ### NgForm 和模板引用变量
 
   Let's look at one final example: a form, the poster child for template reference variables.
 
-  让我们看看最后一个例子：一个表单，使用模板引用变量的典范。
+  让我们看看最后一个例子：表单，使用模板引用变量的典范。
 
   The HTML for a form can be quite involved, as we saw in the [Forms](forms.html) chapter.
   The following is a *simplified* example &mdash; and it's not simple at all.
 
-  正如我们在[表单](forms.html)一章中所见过的，此表单的HTML可以做得相当复杂。
-  下面是一个*简化过的*范例 —— 虽然仍算不上多简单。
+  正如在[表单](forms.html)一章中所见过的，表单的 HTML 可以做得相当复杂。
+  下面是*简化过的*范例 —— 虽然仍算不上多简单。
 +makeExample('template-syntax/ts/app/app.component.html', 'ref-form')(format=".")
 :marked
   A template reference variable, `theForm`, appears three times in this example, separated
   by a large amount of HTML.
 
-  模板引用变量`theForm`在这个例子中出现了三次，中间隔着一大段HTML。
+  模板引用变量`theForm`在这个例子中出现了三次，中间隔着一大段 HTML。
 +makeExample('template-syntax/ts/app/app.component.html', 'ref-form-a')(format=".")
 :marked
   What is the value of `theForm`?
@@ -2257,13 +2424,14 @@ figure.image-display
   and endows it with additional superpowers such as the ability to
   track the validity of user input.
 
-  如果Angular没有接管它，那它可能是个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)。
-  实际上它是个`ngForm`，一个对Angular内置指令`NgForm`的引用。它包装了原生的`HTMLFormElement`并赋予它更多“超能力”，比如跟踪用户输入的有效性。
+  如果 Angular 没有接管它，那它可能是个[HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)。
+  实际上它是个`ngForm`，对 Angular 内置指令`NgForm`的引用。
+  它包装了原生的`HTMLFormElement`并赋予它更多超能力，比如跟踪用户输入的有效性。
 
   This explains how we can disable the submit button by checking `theForm.form.valid`
   and pass an object with rich information to the parent component's `onSubmit` method.
 
-  这解释了我们该如何通过检查`theForm.form.valid`来禁用提交按钮，以及如何把一个信息量略大的对象传给父组件的`onSubmit`方法(译注：`onSubmit`方法可能会出发一个事件，被父组件监听，参见下面的`输入和输出属性`和[父组件监听子组件的事件](docs/ts/latest/cookbook/component-communication.html#!#child-to-parent)。)
+  这解释了该如何通过检查`theForm.form.valid`来禁用提交按钮，以及如何把一个信息量略大的对象传给父组件的`onSubmit`方法。（译注：`onSubmit`方法可能会出发事件，被父组件监听，参见下面的`输入和输出属性`和[父组件监听子组件的事件](docs/ts/latest/cookbook/component-communication.html#!#child-to-parent)。）
 
 <a id="inputs-outputs"></a>
 .l-main-section
@@ -2276,14 +2444,14 @@ figure.image-display
   that appear on the *right side of the binding declaration*.
   A member in that position is a data binding **source**.
 
-  迄今为止，我们主要聚焦在绑定声明的右侧，学习如何在模板表达式和模板语句中绑定到组件成员上。
-  当一个成员出现在这个位置上，则称之为数据绑定的**源**。
+  迄今为止，我们主要聚焦在*绑定声明的右侧*，学习如何在模板表达式和模板语句中绑定到组件成员。
+  当成员出现在这个位置上，则称之为数据绑定的**源**。
 
   This section concentrates on binding to **targets**, which are directive
   properties on the *left side of the binding declaration*.
   These directive properties must be declared as **inputs** or **outputs**.
 
-  这一节则专注于绑定到的**目标**，它位于*绑定声明中的左侧*。
+  本节则专注于绑定到的**目标**，它位于*绑定声明中的左侧*。
   这些指令的属性必须被声明成**输入**或**输出**。
 
 .alert.is-important
@@ -2301,29 +2469,31 @@ figure.image-display
     The *target* of a binding is to the *left* of the `=`.
     The *source* is on the *right* of the `=`.
 
-    绑定的*目标*是在`=`*左侧*的部分，*源*则是在`=`*右侧*的部分。
+    绑定的*目标*是在`=`*左侧*的部分，
+    *源*则是在`=`*右侧*的部分。
 
     The *target* of a binding is the property or event inside the binding punctuation: `[]`, `()` or `[()]`.
     The *source* is either inside quotes (`" "`) or within an interpolation (`{{}}`).
 
-    绑定的*目标*是绑定符：`[]`、`()`或`[()]`中的属性或事件名，*源*则是引号(`" "`)中的部分或插值符号(`{{}}`)中的部分。
+    绑定的*目标*是绑定符：`[]`、`()`或`[()]`中的属性或事件名，
+    *源*则是引号 (`" "`) 中的部分或插值符号 (`{{}}`) 中的部分。
 
     Every member of a **source** directive is automatically available for binding.
     We don't have to do anything special to access a directive member in a template expression or statement.
 
     **源**指令中的每个成员都会自动在绑定中可用。
-    我们不需要特别做什么，就能在模板表达式或语句中访问指令的成员。
+    不需要特别做什么，就能在模板表达式或语句中访问指令的成员。
 
     We have *limited* access to members of a **target** directive.
     We can only bind to properties that are explicitly identified as *inputs* and *outputs*.
 
     访问**目标**指令中的成员则*受到限制*。
-    我们只能绑定到那些显式标记为*输入*或*输出*的属性。
+    只能绑定到那些显式标记为*输入*或*输出*的属性。
 :marked
   In the following example, `iconUrl` and `onSave` are members of a component
   that are referenced within quoted syntax to the right of the `=`.
 
-  在下面的例子中，`iconUrl`和`onSave`是组件的成员，它们在`=`右侧引号中的语法中被引用了。
+  在下面的例子中，`iconUrl`和`onSave`是组件的成员，它们在`=`右侧引号语法中被引用了。
 +makeExample('template-syntax/ts/app/app.component.html', 'io-1')(format=".")
 :marked
   They are *neither inputs nor outputs* of the component. They are data sources for their bindings.
@@ -2340,8 +2510,8 @@ figure.image-display
   `HeroDetailComponent.deleteRequest` is inside parentheses; it is the target of an event binding.
 
   `HeroDetailComponent.hero`和`HeroDetailComponent.deleteRequest`都在绑定声明的**左侧**。
-  `HeroDetailComponent.hero`在方括号中，它是一个属性绑定的目标。
-  `HeroDetailComponent.deleteRequest`在圆括号中，它是一个事件绑定的目标。
+  `HeroDetailComponent.hero`在方括号中，它是属性绑定的目标。
+  `HeroDetailComponent.deleteRequest`在圆括号中，它是事件绑定的目标。
 
   ### Declaring input and output properties
 
@@ -2363,75 +2533,81 @@ figure.image-display
     Alternatively, we can identify members in the `inputs` and `outputs` #{_array}s
     of the directive metadata, as in this example:
 
-    另外，我们还可以在指令元数据的`inputs`或`outputs`数组中标记出这些成员。比如这个例子：
+    另外，还可以在指令元数据的`inputs`或`outputs`数组中标记出这些成员。比如这个例子：
   +makeExample('template-syntax/ts/app/hero-detail.component.ts', 'input-output-2')(format=".")
   <br>
   :marked
     We can specify an input/output property either with a decorator or in a metadata #{_array}.
     Don't do both!
 
-    我们既可以通过装饰器，又可以通过元数据数组来指定输入/输出属性。但别同时用！
+    既可以通过装饰器，也可以通过元数据数组来指定输入/输出属性。但别同时用！
 :marked
   ### Input or output?
 
-  ### 输入或输出？
+  ### 输入还是输出？
 
   *Input* properties usually receive data values.
   *Output* properties expose event producers, such as `EventEmitter` objects.
 
   *输入*属性通常接收数据值。
-  *输出*属性暴露事件生产者，比如`EventEmitter`对象。
+  *输出*属性暴露事件生产者，如`EventEmitter`对象。
 
   The terms _input_ and _output_ reflect the perspective of the target directive.
 
-  _输入_和_输出_这两个词是从目标指令的视角来说的。
+  _输入_和_输出_这两个词是从目标指令的角度来说的。
 figure.image-display
     img(src='/resources/images/devguide/template-syntax/input-output.png' alt="Inputs and outputs")
 :marked
   `HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
   because data flows *into* that property from a template binding expression.
 
-  `HeroDetailComponent.hero`是一个相对于`HeroDetailComponent`视角的**输入**属性，因为数据流从模板绑定表达式流向那个属性。
+  从`HeroDetailComponent`角度来看，`HeroDetailComponent.hero`是个**输入**属性，
+  因为数据流从模板绑定表达式流*入*那个属性。
 
   `HeroDetailComponent.deleteRequest` is an **output** property from the perspective of `HeroDetailComponent`
   because events stream *out* of that property and toward the handler in a template binding statement.
 
-  `HeroDetailComponent.deleteRequest`是一个相对于`HeroDetailComponent`视角的**输出**属性，因为事件流来自这个属性，并且被模板绑定语句所处理。
+  从`HeroDetailComponent`角度来看，`HeroDetailComponent.deleteRequest`是个**输出**属性，
+  因为事件从那个属性流*出*，流向模板绑定语句中的处理器。
 
 h3#aliasing-io Aliasing input/output properties
-h3#aliasing-io 输入/输出属性别名
+
+h3#aliasing-io 给输入/输出属性起别名
+
 :marked
   Sometimes we want the public name of an input/output property to be different from the internal name.
 
-  有时我们需要让输入/输出属性的公开名字不同于内部名字。
+  有时需要让输入/输出属性的公开名字不同于内部名字。
 
   This is frequently the case with [attribute directives](attribute-directives.html).
   Directive consumers expect to bind to the name of the directive.
   For example, when we apply a directive with a `myClick` selector to a `<div>` tag,
   we expect to bind to an event property that is also called `myClick`.
 
-  这是使用[属性(Attribute)型指令](attribute-directives.html)时的常见情况。
+  这是使用 [attribute 指令](attribute-directives.html)时的常见情况。
+  指令的使用者期望绑定到指令名。例如，在`<div>`上用`myClick`选择器应用指令时，
+  希望绑定的事件属性也叫`myClick`。
 +makeExample('template-syntax/ts/app/app.component.html', 'myClick')(format=".")
 :marked
   However, the directive name is often a poor choice for the name of a property within the directive class.
   The directive name rarely describes what the property does.
   The `myClick` directive name is not a good name for a property that emits click messages.
 
-  无论如何，在指令类中，直接用指令名作为自己的属性名通常都不是好的选择。
+  然而，在指令类中，直接用指令名作为自己的属性名通常都不是好的选择。
   指令名很少能描述这个属性是干嘛的。
-  `myClick`这个指令名对于用来发出click消息的属性就算不上一个好名字。
+  `myClick`这个指令名对于用来发出 click 消息的属性就算不上一个好名字。
 
   Fortunately, we can have a public name for the property that meets conventional expectations,
   while using a different name internally.
   In the example immediately above, we are actually binding *through the* `myClick` *alias* to
   the directive's own `clicks` property.
 
-  幸运的是，我们可以使用一个约定俗成的公开名字，同时在内部使用一个不同的名字。
-  在紧上面这个例子中，我们实际上是把`myClick`这个别名指向了指令自己的`clicks`属性。
+  幸运的是，可以使用约定俗成的公开名字，同时在内部使用不同的名字。
+  在上面例子中，实际上是把`myClick`这个别名指向了指令自己的`clicks`属性。
 
   We can specify the alias for the property name by passing it into the input/output decorator like this:
 
-  通过把别名传进@Input/@Output装饰器，我们可以为属性指定别名，就像这样：
+  把别名传进@Input/@Output装饰器，就可以为属性指定别名，就像这样：
 
 +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick')(format=".")
 
@@ -2441,8 +2617,8 @@ h3#aliasing-io 输入/输出属性别名
     We write a colon-delimited (`:`) string with
     the directive property name on the *left* and the public alias on the *right*:
 
-    我们也能在`inputs`和`outputs`数组中为属性指定别名。
-    我们可以写一个冒号(`:`)分隔的字符串，*左侧*是指令中的属性名，*右侧*则是公开的别名。
+    也可在`inputs`和`outputs`数组中为属性指定别名。
+    可以写一个冒号 (`:`) 分隔的字符串，*左侧*是指令中的属性名，*右侧*则是公开的别名。
   +makeExample('template-syntax/ts/app/click.directive.ts', 'output-myClick2')(format=".")
 
 <a id="expression-operators"></a>
@@ -2455,26 +2631,26 @@ h3#aliasing-io 输入/输出属性别名
   The template expression language employs a subset of #{_JavaScript} syntax supplemented with a few special operators
   for specific scenarios. We'll cover two of these operators: _pipe_ and _safe navigation operator_.
 
-  模板表达式语言使用了JavaScript语法的一个子集，并补充了几个用于特定场景的特殊操作符。
-  这里我们讲其中的两个：_管道_和_安全导航操作符_。
+  模板表达式语言使用了 JavaScript 语法的子集，并补充了几个用于特定场景的特殊操作符。
+  下面介绍其中的两个：_管道_和_安全导航操作符_。
 
 :marked
   <a id="pipe"></a>
   ### The pipe operator ( | )
 
-  ### 管道操作符( | )
+  ### 管道操作符 ( | )
 
   The result of an expression might require some transformation before we’re ready to use it in a binding.  For example, we might want to display a number as a currency, force text to uppercase, or filter a list and sort it.
 
-  在用到绑定中之前，表达式的结果可能需要一些转换。比如，我们可能希望把一个数字显示成金额、强制文本变成大写，或者过滤一个列表以及排序它。
+  在绑定之前，表达式的结果可能需要一些转换。例如，可能希望把数字显示成金额、强制文本变成大写，或者过滤列表以及进行排序。
 
   Angular [pipes](./pipes.html) are a good choice for small transformations such as these.
   Pipes are simple functions that accept an input value and return a transformed value.
   They're easy to apply within template expressions, using the **pipe operator (`|`)**:
 
-  Angular[管道](./pipes.html)对像这样的小型转换来说是个明智的选择。
+  Angular [管道](./pipes.html)对像这样的小型转换来说是个明智的选择。
   管道是一个简单的函数，它接受一个输入值，并返回转换结果。
-  它们很容易用于模板表达式中，只要使用**管道操作符(`|`)**就行了。
+  它们很容易用于模板表达式中，只要使用**管道操作符 (`|`) **就行了。
 +makeExample('template-syntax/ts/app/app.component.html', 'pipes-1')(format=".")
 :marked
   The pipe operator passes the result of an expression on the left to a pipe function on the right.
@@ -2483,19 +2659,19 @@ h3#aliasing-io 输入/输出属性别名
 
   We can chain expressions through multiple pipes:
 
-  我们还可以通过多个管道串联出表达式：
+  还可以通过多个管道串联表达式：
 +makeExample('template-syntax/ts/app/app.component.html', 'pipes-2')(format=".")
 :marked
   And we can also [apply parameters](./pipes.html#parameterizing-a-pipe) to a pipe:
 
-  我们还能对它们使用参数：
+  还能对它们使用参数：
 +makeExample('template-syntax/ts/app/app.component.html', 'pipes-3')(format=".")
 
 block json-pipe
   :marked
     The `json` pipe is particularly helpful for debugging our bindings:
 
-    `json`管道是特别设计来帮助我们调试绑定的：
+    `json`管道对调试绑定特别有用：
   +makeExample('template-syntax/ts/app/app.component.html', 'pipes-json')(format=".")
   :marked
     The generated output would look something like this
@@ -2511,13 +2687,13 @@ block json-pipe
   <a id="safe-navigation-operator"></a>
   ### The safe navigation operator ( ?. ) and null property paths
 
-  ### 安全导航操作符( ?. )和空属性路径
+  ### 安全导航操作符 ( ?. ) 和空属性路径
 
   The Angular **safe navigation operator (`?.`)** is a fluent and convenient way to guard against null and undefined values in property paths.
   Here it is, protecting against a view render failure if the `currentHero` is null.
 
-  Angular的**安全导航操作符(`?.`)**是一种流畅而便利的方式，用来保护出现在属性路径中null和undefined值。
-  这意味着，当`currentHero`为空时，保护视图渲染器，让它免于失败。
+  Angular 的**安全导航操作符 (`?.`) **是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。
+  下例中，当`currentHero`为空时，保护视图渲染器，让它免于失败。
 +makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
 
 block dart-safe-nav-op
@@ -2536,13 +2712,13 @@ block dart-safe-nav-op
   The view still renders but the displayed value is blank; we see only "The title is" with nothing after it.
   That is reasonable behavior. At least the app doesn't crash.
 
-  这个视图仍然被渲染出来，但是显示的值是空；我们只能看到“The title is”，它后面却没有任何东西。
+  这个视图仍然被渲染出来，但是显示的值是空；只能看到 “The title is”，它后面却没有任何东西。
   这是合理的行为。至少应用没有崩溃。
 
   Suppose the template expression involves a property path, as in this next example
   where we’re displaying the `firstName` of a null hero.
 
-  假设模板表达式需要一个属性路径，在下一个例子中，我们要显示一个空(null)英雄的`firstName`。
+  假设模板表达式涉及属性路径，在下例中，显示一个空 (null) 英雄的`firstName`。
 
 code-example(language="html").
   The null hero's name is {{nullHero.firstName}}
@@ -2551,7 +2727,7 @@ block null-deref-example
   :marked
     JavaScript throws a null reference error, and so does Angular:
 
-    JavaScript抛出了一个空引用错误，Angular也是如此：
+    JavaScript 抛出了空引用错误，Angular 也是如此：
   code-example(format="nocode").
     TypeError: Cannot read property 'firstName' of null in [null].
 
@@ -2565,27 +2741,27 @@ block null-deref-example
   we've made a programming error that should be caught and fixed.
   Throwing an exception is the right thing to do.
 
-  如果确信`hero`属性永远不可能为空，我们就可以声称这是一个合理的行为。
-  如果它必须不能为空，但它仍然是空值，我们就制造了一个编程错误，以便它被捕获和修复。
-  这种情况下，抛出一个异常正是我们应该做的。
+  如果确信`hero`属性永远不可能为空，可以声称这是合理的行为。
+  如果它必须不能为空，但它仍然是空值，实际上是制造了一个编程错误，它应该被捕获和修复。
+  这种情况下，抛出异常是对的。
 
   On the other hand, null values in the property path may be OK from time to time,
   especially when we know the data will arrive eventually.
 
-  另一方面，属性路径中的空值可能会时常发生，特别是当我们知道这些数据最终总会到来的时候。
+  另一方面，属性路径中的空值可能会时常发生，特别是当我们知道数据最终会出现。
 
   While we wait for data, the view should render without complaint, and
   the null property path should display as blank just as the `title` property does.
 
-  当我们等待数据的时候，视图渲染器不应该抱怨，而应该把这个空属性路径显示为空白，就像上面`title`属性所做的那样。
+  当等待数据的时候，视图渲染器不应该抱怨，而应该把这个空属性路径显示为空白，就像上面`title`属性那样。
 
   Unfortunately, our app crashes when the `currentHero` is null.
 
-  不幸的是，当`currentHero`为空的时候，我们的应用崩溃了。
+  不幸的是，当`currentHero`为空的时候，应用崩溃了。
 
   We could code around that problem with [NgIf](#ngIf).
 
-  我们可以通过写[NgIf](#ngIf)代码来解决这个问题。
+  可以通过写[NgIf](#ngIf)代码来解决这个问题。
 +makeExample('template-syntax/ts/app/app.component.html', 'safe-4')(format=".")
 
 block safe-op-alt
@@ -2593,7 +2769,7 @@ block safe-op-alt
     Or we could try to chain parts of the property path with `&&`, knowing that the expression bails out
     when it encounters the first null.
 
-    或者我们可以尝试通过`&&`来把属性路径的各部分串起来，让它在遇到第一个空值的时候，就返回空。
+    或者可以尝试通过`&&`来把属性路径的各部分串起来，让它在遇到第一个空值的时候，就返回空。
   +makeExample('template-syntax/ts/app/app.component.html', 'safe-5')(format=".")
 
 :marked
@@ -2601,16 +2777,16 @@ block safe-op-alt
   Imagine guarding against a null somewhere in a long property path such as `a.b.c.d`.
 
   这些方法都有价值，但是会显得笨重，特别是当这个属性路径非常长的时候。
-  想象一下在一个很长的属性路径(如`a.b.c.d`)中对空值提供保护。
+  想象一下在一个很长的属性路径（如`a.b.c.d`）中对空值提供保护。
 
 :marked
   The Angular safe navigation operator (`?.`) is a more fluent and convenient way to guard against nulls in property paths.
   The expression bails out when it hits the first null value.
   The display is blank, but the app keeps rolling without errors.
 
-  Angular安全导航操作符(`?.`)是在属性路径中保护空值的一个更加流畅、便利的方式。
+  Angular 安全导航操作符 (`?.`) 是在属性路径中保护空值的更加流畅、便利的方式。
   表达式会在它遇到第一个空值的时候跳出。
-  显示是空的，但是应用正常工作，而没有发生错误。
+  显示是空的，但应用正常工作，而没有发生错误。
 +makeExample('template-syntax/ts/app/app.component.html', 'safe-6')(format=".")
 :marked
   It works perfectly with long property paths such as `a?.b?.c?.d`.
@@ -2625,4 +2801,4 @@ block safe-op-alt
 
   We’ve completed our survey of template syntax. Now it's time to put that knowledge to work as we write our own components and directives.
 
-  我们完成了模板语法的概述。现在，我们该把如何写组件和指令的知识投入到实际工作当中了。
+  我们完成了模板语法的概述。现在，该把如何写组件和指令的知识投入到实际工作当中了。