2477 lines
123 KiB
Plaintext
2477 lines
123 KiB
Plaintext
block includes
|
||
include ../_util-fns
|
||
- var _JavaScript = 'JavaScript';
|
||
//- Double underscore means don't escape var, use !{__var}.
|
||
- var __chaining_op = '<code>;</code> or <code>,</code>';
|
||
- var __new_op = '<code>new</code>';
|
||
- var __objectAsMap = 'object';
|
||
|
||
: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*)和面向用户的模板来与用户交互。
|
||
|
||
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中，组件扮演着控制器或视图模型的角色，模板则扮演视图的角色。
|
||
|
||
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)
|
||
* [Interpolation](#interpolation)
|
||
* [插值表达式](#interpolation)
|
||
* [Template expressions](#template-expressions)
|
||
* [模板表达式](#template-expressions)
|
||
* [Template statements](#template-statements)
|
||
* [模板语句](#template-statements)
|
||
* [Binding syntax](#binding-syntax)
|
||
* [绑定语法](#binding-syntax)
|
||
* [Property binding](#property-binding)
|
||
* [属性绑定](#property-binding)
|
||
* [Attribute, class, and style bindings](#other-bindings)
|
||
* [HTML属性、class和style绑定](#other-bindings)
|
||
* [Event binding](#event-binding)
|
||
* [事件绑定](#event-binding)
|
||
* [Two-way data binding with `NgModel`](#ngModel)
|
||
* [使用`NgModel`进行双向数据绑定](#ngModel)
|
||
* [Built-in directives](#directives)
|
||
* [内建指令](#directives)
|
||
* [NgClass](#ngClass)
|
||
* [NgClass](#ngClass)
|
||
* [NgStyle](#ngStyle)
|
||
* [NgStyle](#ngStyle)
|
||
* [NgIf](#ngIf)
|
||
* [NgIf](#ngIf)
|
||
* [NgSwitch](#ngSwitch)
|
||
* [NgSwitch](#ngSwitch)
|
||
* [NgFor](#ngFor)
|
||
* [NgFor](#ngFor)
|
||
* [* and <template>](#star-template)
|
||
* [* 与 <template>](#star-template)
|
||
* [Template reference variables](#ref-vars)
|
||
* [模板引用变量](#ref-vars)
|
||
* [Input and output properties](#inputs-outputs)
|
||
* [输入输出属性](#inputs-outputs)
|
||
* [Template expression operators](#expression-operators)
|
||
* [模板表达式操作符](#expression-operators)
|
||
* [pipe](#pipe)
|
||
* [管道](#pipe)
|
||
* [safe navigation operator (?.)](#safe-navigation-operator)
|
||
* [“安全导航操作符”(?.)](#safe-navigation-operator)
|
||
|
||
p.
|
||
The #[+liveExampleLink2()]
|
||
demonstrates all of the syntax and code snippets described in this chapter.
|
||
p.
|
||
这个#[+liveExampleLink2('在线例子')]演示了本章中描述的所有语法和代码片段。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## HTML
|
||
## HTML
|
||
HTML is the language of the Angular template. Our [QuickStart](../quickstart.html) application had a template that was pure HTML:
|
||
|
||
HTML是Angular模板的“语言”。我们的[“快速起步”](../quickstart.html)应用就有一个模板是纯HTML的：
|
||
|
||
code-example(language="html" escape="html").
|
||
<h1>My First Angular 2 App</h1>
|
||
|
||
: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>`只是被忽略了。）
|
||
|
||
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>`元素在我们的舞台上中并没有扮演有用的角色。基本上所有其它的元素都被一样使用。
|
||
|
||
We can extend the HTML vocabulary of our templates with components and directives that appear as new elements and attributes. And we are about to learn how to get and set DOM values dynamically through data binding.
|
||
|
||
我们可以通过组件和指令来扩展模板中的HTML词汇。它们看上去就是新元素和属性。我们将学习如何通过数据绑定来动态获取/设置DOM的值。
|
||
|
||
Let’s turn to the first form of data binding — interpolation — to see how much richer template HTML can be.
|
||
|
||
我们拿数据绑定的第一种形式 —— 插值表达式 —— 来看看模板的HTML可以有多丰富。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Interpolation
|
||
## 插值表达式
|
||
We met the double-curly braces of interpolation, `{{` and `}}`, early in our Angular education.
|
||
|
||
在以前的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元素标签内的文本或对标签的属性进行赋值。
|
||
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".")
|
||
:marked
|
||
The material between the braces is often the name of a component property. Angular replaces that name with the
|
||
string value of the corresponding component property. In this example, Angular evaluates the `title` and `heroImageUrl` properties
|
||
and "fills in the blanks", displaying first a bold application title and then a heroic image.
|
||
|
||
在括号之间的“素材”，通常是组件属性的名字。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首先**对它求值**然后把它**转换成字符串**。下列插值表达式通过把括号中的两个数字相加说明了这一点：
|
||
+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()`：
|
||
+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 concatenates them with neighboring literal strings. Finally,
|
||
it assigns this composite interpolated result to an **element or directive property**.
|
||
|
||
Angular对所有双花括号中的表达式求值，把求值的结果转换成字符串，并把它们跟相邻的字符串字面量连接起来。最后，它把这个组合出来的插值结果赋给一个**元素或指令的属性**。
|
||
|
||
We appear to be inserting the result between element tags and assigning to attributes.
|
||
It's convenient to think so, and we rarely suffer for this mistake.
|
||
But it is not literally true. Interpolation is a special syntax that Angular converts into a
|
||
[property binding](#property-binding), as we'll explain below.
|
||
|
||
表面上看，我们在元素标签之间插入了结果和对标签的属性进行了赋值。
|
||
这样思考起来很方便，并且这个错误很少给我们带来麻烦。
|
||
但严格来讲，这是不对的。插值表达式是一个特殊的语法，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元素、一个组件或一个指令。
|
||
|
||
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"`。
|
||
|
||
We write template expressions in a language that looks like #{_JavaScript}.
|
||
Many #{_JavaScript} expressions are legal template expressions, but not all.
|
||
|
||
我们用来写模板表达式的是一种看起来很像JavaScript的语言。
|
||
很多JavaScript表达式也是合法的模板表达式，但不是全部。
|
||
|
||
#{_JavaScript} expressions that have or promote side effects are prohibited,
|
||
including:
|
||
|
||
JavaScript中那些具有或可能引发副作用的表达式是被禁止的，包括：
|
||
|
||
* assignments (`=`, `+=`, `-=`, ...)
|
||
* 赋值 (`=`, `+=`, `-=`, ...)
|
||
* !{__new_op}
|
||
* `new`运算符
|
||
* chaining expressions with !{__chaining_op}
|
||
* 使用`;`或`,`的链式表达式
|
||
* increment and decrement operators (`++` and `--`)
|
||
* 自增或自减操作符(`++`和`--`)
|
||
|
||
:marked
|
||
Other notable differences from #{_JavaScript} syntax include:
|
||
|
||
和JavaScript语法的其它显著不同包括：
|
||
|
||
block notable-differences
|
||
:marked
|
||
* no support for the bitwise operators `|` and `&`
|
||
* 不支持位运算 `|` 和 `&`
|
||
* new [template expression operators](#expression-operators), such as `|` and `?.`
|
||
* 具有新的 [模板表达式运算符](#expression-operators)，比如`|`和`?.`
|
||
|
||
h3#expression-context Expression context
|
||
|
||
h3#expression-context 表达式上下文
|
||
|
||
block template-expressions-cannot
|
||
:marked
|
||
Perhaps more surprising, template expressions cannot refer to anything in
|
||
the global namespace. They can’t refer to `window` or `document`. They
|
||
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>。它们被局限于只能访问来自表达式上下文中的成员。
|
||
|
||
: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`属性。
|
||
|
||
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)
|
||
* [Quick execution](#quick-execution)
|
||
* [执行迅速](#quick-execution)
|
||
* [Simplicity](#simplicity)
|
||
* [非常简单](#simplicity)
|
||
* [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
|
||
target property.
|
||
|
||
模板表达式除了目标属性的值以外，不应该改变应用的任何状态。
|
||
|
||
This rule is essential to Angular's "unidirectional data flow" policy.
|
||
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“单向数据流”策略的基础。
|
||
我们永远不应该担心读取一个组件值可能改变另外的显示值。
|
||
在一次单独的渲染过程中，视图应该总是稳定的。
|
||
|
||
#### 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执行模板表达式比我们想象的频繁。
|
||
它们可能在每一次按键或鼠标移动后被调用。表达式应该快速结束，否则用户就会感到拖沓，特别是在较慢的设备上。
|
||
当计算比较昂贵时，应该考虑缓存那些从其它值计算得出的值。
|
||
|
||
#### 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变更检测的性能。
|
||
|
||
In Angular terms, an idempotent expression always returns *exactly the same thing* until
|
||
one of its dependent values changes.
|
||
|
||
用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`），连续调用它两次，也应该返回同一个对象的*引用*。
|
||
|
||
.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元素、组件或指令）触发的**事件**对象。
|
||
|
||
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"`。
|
||
|
||
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中“单向数据流”的另一面。
|
||
在事件循环的这一回合中，我们可以随意改变任何地方的任何东西。
|
||
: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的语言。
|
||
模板语句解析器和模板表达式解析器有所不同，它的特别之处在于它既支持基本赋值（`=`）又支持使用分号（`;`）和逗号（`,`）把表达式串起来。
|
||
|
||
However, certain #{_JavaScript} syntax is not allowed:
|
||
|
||
但无论如何，某些JavaScript语法仍然是不允许的：
|
||
* !{__new_op}
|
||
* `new`运算符
|
||
* increment and decrement operators, `++` and `--`
|
||
* 自增和自减运算符：`++`和`--`
|
||
* operator assignment, such as `+=` and `-=`
|
||
* 操作并赋值，比如`+=`和`-=`
|
||
* the bitwise operators `|` and `&`
|
||
* 位操作符`|`和`&`
|
||
* the [template 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
|
||
Template statements cannot refer to anything in the global namespace. They
|
||
can’t refer to `window` or `document`. They can’t call `console.log` or
|
||
`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*就是数据绑定组件实例中的一个方法。
|
||
|
||
The statement context may include an object other than the component.
|
||
A [template reference variable](#ref-vars) is one such alternative context object.
|
||
We'll frequently see the reserved `$event` symbol in event binding statements,
|
||
representing the "message" or "payload" of the raised 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元素之间建立绑定，框架就会完成这项工作。
|
||
|
||
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数据绑定和它的语法。
|
||
|
||
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 数据流方向
|
||
th
|
||
p Syntax
|
||
p 语法
|
||
th
|
||
p Binding type
|
||
p 绑定类型
|
||
tr
|
||
td
|
||
p One-way
|
||
p 单向
|
||
p from data source
|
||
p 从数据源
|
||
p to view target
|
||
p 到视图目标
|
||
td
|
||
code-example().
|
||
{{expression}}
|
||
[target] = "expression"
|
||
bind-target = "expression"
|
||
td
|
||
p Interpolation
|
||
p 插值表达式
|
||
p Property
|
||
p Property
|
||
p Attribute
|
||
p Attribute
|
||
p Class
|
||
p 类
|
||
p Style
|
||
p 样式
|
||
tr
|
||
td
|
||
p One-way
|
||
p 单向
|
||
p from view target
|
||
p 从视图目标
|
||
p to data source
|
||
p 到数据源
|
||
td
|
||
code-example().
|
||
(target) = "statement"
|
||
on-target = "statement"
|
||
td
|
||
p Event
|
||
p 事件
|
||
tr
|
||
td
|
||
p Two-way
|
||
p 双向
|
||
td
|
||
code-example().
|
||
[(target)] = "expression"
|
||
bindon-target = "expression"
|
||
td
|
||
p Two-way
|
||
p 双向
|
||
|
||
.alert.is-important
|
||
:marked
|
||
### 译注
|
||
由于HTML的Attribute和DOM的Property在中文中都被翻译成了“属性”，无法加以区分，而接下来的部分重点是对它们进行比较的。
|
||
|
||
我们无法改变历史，因此，在本章的翻译中，我们保留它们的英文形式，而不加翻译，以免混淆。
|
||
在本章中，如果有只提“属性”的地方，一定是指Property，因为在Angular 2中，实际上很少涉及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-`）的形式。
|
||
|
||
What is that target? Before we can answer that question, we must challenge ourselves to look at template HTML in a new way.
|
||
|
||
什么是“目标”？在回答这个问题之前，我们必须先挑战下自我，尝试用另一种方式来审视模板中的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+*。
|
||
|
||
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有着显著的不同。
|
||
我们需要一种新的思维模型。
|
||
|
||
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来修改那些元素。
|
||
|
||
+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值。
|
||
|
||
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元素在模板中使用。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'hero-detail-1')(format=".")
|
||
:marked
|
||
That’s HTML Plus.
|
||
|
||
这就是HTML+。
|
||
|
||
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
|
||
We’ll get to that peculiar bracket notation in a moment. Looking beyond it,
|
||
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的当前值。
|
||
|
||
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。
|
||
|
||
.l-sub-section
|
||
:marked
|
||
### HTML attribute vs. DOM property
|
||
### HTML的Attribute vs. 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之间的区别是至关重要的。
|
||
|
||
**Attributes are defined by HTML. Properties are defined by the 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`就是一个例子。
|
||
|
||
* Some HTML attributes don't have corresponding properties. `colspan` is one example.
|
||
|
||
* 有些HTML Attribute没有对应的Property。`colspan`就是一个例子。
|
||
|
||
* Some DOM properties don't have corresponding attributes. `textContent` is one example.
|
||
|
||
* 有些DOM Property没有对应的Attribute。`textContent`就是一个例子。
|
||
|
||
* Many HTML attributes appear to map to properties ... but not in the way we might think!
|
||
|
||
* 大量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的值不能改变。**
|
||
|
||
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”。
|
||
|
||
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，就会明白这一点。
|
||
|
||
The HTML attribute `value` specifies the *initial* value; the DOM `value` property is the *current* value.
|
||
|
||
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`，于是按钮就被禁用了。
|
||
|
||
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>`这种写法来启用一个按钮的原因。
|
||
|
||
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*的价值。
|
||
|
||
**The HTML attribute and the DOM property are not the same thing, even when they have the same name.**
|
||
|
||
**就算名字相同，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*。**
|
||
|
||
.callout.is-helpful
|
||
header A world without attributes
|
||
header 一个没有Attribute的世界
|
||
:marked
|
||
In the world of Angular 2, 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就完全靠边站了。
|
||
: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名。
|
||
下面是的汇总表：
|
||
|
||
// If you update this table, UPDATE it in Dart & JS, too.
|
||
<div width="90%">
|
||
table
|
||
tr
|
||
th
|
||
p Binding type
|
||
p 绑定类型
|
||
th
|
||
p Target
|
||
p 目标
|
||
th
|
||
p Examples
|
||
p 范例
|
||
tr
|
||
td
|
||
p Property
|
||
p Property
|
||
td
|
||
p Element property
|
||
p 元素的Property
|
||
p Component property
|
||
p 组件的Property
|
||
p Directive property
|
||
p 指令的Property
|
||
td
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-syntax-1')(format=".")
|
||
tr
|
||
td
|
||
p Event
|
||
p 事件
|
||
td
|
||
p Element event
|
||
p 元素的事件
|
||
p Component event
|
||
p 组件的事件
|
||
p Directive event
|
||
p 指令的事件
|
||
td
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-syntax-1')(format=".")
|
||
tr
|
||
td
|
||
p Two-way
|
||
p 双向
|
||
td
|
||
p Event and 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 exception)
|
||
p Attribute例外情况
|
||
td
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'attribute-binding-syntax-1')(format=".")
|
||
tr
|
||
td
|
||
p Class
|
||
p 类
|
||
td
|
||
p <code>class</code> property
|
||
p <code>class</code> property
|
||
td
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'class-binding-syntax-1')(format=".")
|
||
tr
|
||
td
|
||
p Style
|
||
p 样式
|
||
td
|
||
p <code>style</code> property
|
||
p <code>style</code> property
|
||
td
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'style-binding-syntax-1')(format=".")
|
||
</div>
|
||
|
||
:marked
|
||
Let’s descend from the architectural clouds and look at each of these binding types in concrete detail.
|
||
|
||
让我们从结构性云层中走出来，看看每种绑定类型的具体情况。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Property binding
|
||
## 属性绑定
|
||
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)时，我们就要写模板的**属性绑定**。
|
||
|
||
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`属性上：
|
||
+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`（未改变）时禁用一个按钮：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-2')(format=".")
|
||
:marked
|
||
Another is setting a property of a directive:
|
||
|
||
另一个例子是设置指令的属性：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-3')(format=".")
|
||
:marked
|
||
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)来监听它们。
|
||
|
||
If we must read a target element property or call one of its methods,
|
||
we'll need a different technique.
|
||
See the API reference for
|
||
[viewChild](../api/core/ViewChild-var.html) and
|
||
[contentChild](../api/core/ContentChild-var.html).
|
||
|
||
如果我们不得不读取目标元素上的属性或调用它的某个方法，我们得用另一种技术。
|
||
参见API参考中的[viewChild](../api/core/ViewChild-var.html)和
|
||
[contentChild](../api/core/ContentChild-var.html)。
|
||
|
||
// TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../
|
||
|
||
: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`属性。
|
||
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-1')(format=".")
|
||
:marked
|
||
Some people prefer the `bind-` prefix alternative, known as the *canonical form*:
|
||
|
||
有些人喜欢用`bind-`前缀的可选形式，并称之为*规范形式*：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-5')(format=".")
|
||
: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元素的属性名。
|
||
|
||
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会先去看这个名字是否是某个已知指令的属性名，就像下面的例子中一样：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-3')(format=".")
|
||
|
||
.l-sub-section
|
||
:marked
|
||
Technically, Angular is matching the name to a directive [input](#inputs-outputs),
|
||
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被映射到了指令自己的属性。
|
||
:marked
|
||
If the name fails to match a property of a known directive or element, Angular reports an “unknown directive” error.
|
||
|
||
如果名字没有匹配上一个已知指令或元素的属性，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没法知道这一点，也没法防止我们误用。
|
||
|
||
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还可能检测到变化，并抛出一个警告型错误。
|
||
更具普遍性的建议是：只使用数据属性和那些只返回值而不做其他事情的方法。
|
||
|
||
### 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`对象：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-4')(format=".")
|
||
|
||
block dart-type-exceptions
|
||
//- N/A
|
||
|
||
: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就会把这个表达式当做一个字符串常量看待，并且用该字符串来*初始化目标属性*。
|
||
它*不会*计算这个字符串。
|
||
|
||
Don't make the following mistake:
|
||
|
||
不要出现这样的失误：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-6')(format=".")
|
||
|
||
block dart-type-exception-example
|
||
//- N/A
|
||
|
||
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设置它，然后忘记它。
|
||
// #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`属性的活绑定，它会一直随着更新。
|
||
|
||
### Property binding or interpolation?
|
||
### 属性绑定还是插值表达式？
|
||
We often have a choice between interpolation and property binding.
|
||
The following binding pairs do the same thing:
|
||
|
||
我们通常得在插值表达式和属性绑定之间做出选择。
|
||
下列这几对绑定做的事情完全相同：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-vs-interpolation')(format=".")
|
||
:marked
|
||
Interpolation is a convenient alternative for property binding in many cases.
|
||
In fact, Angular translates those interpolations into the corresponding property bindings
|
||
before rendering the view.
|
||
|
||
在多数情况下，插值表达式是一个更方便的选择。实际上，在渲染视图之前，Angular就把这些插值表达式翻译成了对应的属性绑定形式。
|
||
|
||
There is no technical reason to prefer one form to the other.
|
||
We lean toward readability, which tends to favor interpolation.
|
||
We suggest establishing coding style rules and choosing the form that
|
||
both conforms to the rules and feels most natural for the task at hand.
|
||
|
||
没有技术上的理由能决定哪种形式更好。
|
||
我们倾向于可读性，所以倾向于插值表达式。
|
||
我们建议建立组织级的代码风格规定，然后选择一种形式，既能遵循规则，又能让手头的任务做起来更自然。
|
||
|
||
:marked
|
||
#### Content Security
|
||
#### 内容安全
|
||
Imagine the following *malicious content*.
|
||
|
||
假设下面的*恶毒内容*
|
||
+makeExample('template-syntax/ts/app/app.component.ts', 'evil-title')(format=".")
|
||
:marked
|
||
Fortunately, Angular data binding is on alert for dangerous HTML.
|
||
It *sanitizes* the values before displaying them.
|
||
It **will not** allow HTML with script tags to leak into the browser, neither with interpolation
|
||
nor property binding.
|
||
|
||
幸运的是，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标签与属性绑定有所不同，但是它们两个都只渲染没有危害的内容。
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/template-syntax/evil-title.png' alt="evil title made safe" width='500px')
|
||
|
||
.l-main-section
|
||
:marked
|
||
<a id="other-bindings"></a>
|
||
## Attribute, class, and style bindings
|
||
## Attribute、class和style绑定
|
||
The template syntax provides specialized one-way bindings for scenarios less well suited to property binding.
|
||
|
||
模板语法为那些不太适合使用属性绑定的场景提供了专门的单向数据绑定形式。
|
||
|
||
### Attribute binding
|
||
### Attribute绑定
|
||
We can set the value of an attribute directly with an **attribute binding**.
|
||
|
||
我们可以通过**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的绑定形式。
|
||
|
||
: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绑定呢？
|
||
|
||
**We must use attribute binding when there is no element property to bind.**
|
||
|
||
**因为当元素没有属性可绑的时候，我们不得不使用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
|
||
table span attributes. They are pure attributes.
|
||
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。
|
||
它们没有对应的属性可供绑定。
|
||
|
||
We become painfully aware of this fact when we try to write something like this:
|
||
|
||
如果我们想写出类似下面这样的东西，这一现状会令我们痛苦：
|
||
code-example(language="html").
|
||
<tr><td colspan="{{1 + 1}}">Three-Four</td></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'，因为它不是已知的原生属性
|
||
: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 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的值。
|
||
|
||
Here we bind `[attr.colspan]` to a calculated value:
|
||
|
||
这里我们把`[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>
|
||
<tr><td>Five</td><td>Six</td></tr>
|
||
</table>
|
||
|
||
One of the primary use cases for attribute binding
|
||
is to set ARIA attributes, as in this example:
|
||
|
||
Attribute绑定的主要用例之一是设置ARIA Attribute（译注：ARIA指可访问性，用于给残障人士访问互联网提供便利），就像这个例子中一样：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'attrib-binding-aria')(format=".")
|
||
:marked
|
||
### Class binding
|
||
### CSS类绑定
|
||
|
||
We can add and remove CSS class names from an element’s `class` attribute with
|
||
a **class binding**.
|
||
|
||
借助**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类的名字组成。
|
||
其中后两部分是可选的。形如：`[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时是这样的：
|
||
+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设置的内容会被完全覆盖）。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'class-binding-2')(format=".")
|
||
|
||
block dart-class-binding-bug
|
||
//- N/A
|
||
|
||
:marked
|
||
Finally, we can bind to a specific class name.
|
||
Angular adds the class when the template expression evaluates to #{_truthy}.
|
||
It removes the class when the expression is #{_falsey}.
|
||
|
||
最后，我们可以绑定到一个特定的类名。
|
||
当模板表达式的求值结果是真值时，Angular会添加这个类，反之则移除它。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'class-binding-3')(format=".")
|
||
|
||
.l-sub-section
|
||
:marked
|
||
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)来同时管理多个类名。
|
||
|
||
:marked
|
||
### Style binding
|
||
### 样式绑定
|
||
|
||
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.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”和“%”来设置字体大小的单位。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'style-binding-2')(format=".")
|
||
|
||
.l-sub-section
|
||
:marked
|
||
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)来同时设置多个内联样式。
|
||
|
||
.l-sub-section
|
||
:marked
|
||
Note that a _style property_ name can be written in either
|
||
[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`。
|
||
|
||
block style-property-name-dart-diff
|
||
//- N/A
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Event binding
|
||
## 事件绑定
|
||
The bindings we’ve met so far flow data in one direction: *from the 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:
|
||
*from an element to the component*.
|
||
|
||
用户不会只盯着屏幕看。他们会在输入框中输入文本。他们会从列表中选取条目。
|
||
他们会点击按钮。这类用户动作可能导致反向的数据流：*从元素到组件*。
|
||
|
||
The only way to know about a user action is to listen for certain events such as
|
||
keystrokes, mouse movements, clicks, and touches.
|
||
We declare our interest in user actions through Angular event binding.
|
||
|
||
知道用户动作的唯一方式是监听正确的事件，比如击键、鼠标移动、点击和触屏。
|
||
我们可以通过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()`方法。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
||
:marked
|
||
### Target event
|
||
### 目标事件
|
||
A **name between enclosing parentheses** — for example, `(click)` —
|
||
identifies the target event. In the following example, the target is the button’s click event.
|
||
|
||
**圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中，目标是按钮的click事件。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
||
:marked
|
||
Some people prefer the `on-` prefix alternative, known as the *canonical form*:
|
||
|
||
有些人更喜欢带`on-`前缀的可选形式，称之为*规范形式*：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-2')(format=".")
|
||
:marked
|
||
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会先看这个名字是否能匹配上已知指令的事件属性，就像下面这个例子：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-3')(format=".")
|
||
|
||
.l-sub-section
|
||
:marked
|
||
The `myClick` directive is further described below in the section
|
||
on [Aliasing input/output properties](#aliasing-io).
|
||
|
||
[别名input/output属性](#aliasing-io)章节有更多关于该`myClick`指令的解释。
|
||
: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就会报“未知指令”错误。
|
||
|
||
### *$event* and event handling statements
|
||
### *$event*和事件处理语句
|
||
In an event binding, Angular sets up an event handler for the target event.
|
||
|
||
在事件绑定中，Angular会为目标事件设置事件处理器。
|
||
|
||
When the event is raised, the handler executes the template statement.
|
||
The template statement typically involves a receiver that wants to do something
|
||
in response to the event, such as take a value from the HTML control and store it
|
||
in a model.
|
||
|
||
当事件发生时，这个处理器会执行模板语句。
|
||
典型的模板语句通常涉及到那些针对事件想作出相应处理的接收器，例如从一个HTML控件中取得一个值，并存入一个模型。
|
||
|
||
The binding conveys information about the event, including data values, through
|
||
an **event object named `$event`**.
|
||
|
||
这种绑定会通过一个**名叫`$event`的事件对象**传达关于此事件的信息（包括数据值）。
|
||
|
||
The shape of the event object is determined by the target event itself.
|
||
If the target event is a native DOM element event, the `$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`这样的属性。
|
||
|
||
Consider this example:
|
||
|
||
考虑这个范例：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'without-NgModel')(format=".")
|
||
:marked
|
||
We’re binding the input box `value` to a `firstName` property, and we’re listening for changes by binding 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`的上下文中执行这条语句。
|
||
|
||
To update the `firstName` property, we must get the changed text by following
|
||
the path `$event.target.value`.
|
||
|
||
要更改`firstName`属性，我们必须通过路径`$event.target.value`来获取更改后的值。
|
||
|
||
If the event belongs to a directive (remember: components are directives), `$event` has whatever shape the directive chose to produce.
|
||
|
||
如果这个事件属于指令（记住：组件是指令的一种），那么`$event`便具有指令所生成的形态（译注：比如inputs）。
|
||
|
||
<a id="eventemitter"></a>
|
||
<a id="custom-event"></a>
|
||
### Custom events with EventEmitter
|
||
### 使用EventEmitter实现自定义事件
|
||
|
||
Directives typically raise custom events with an Angular [EventEmitter](../api/core/EventEmitter-class.html).
|
||
A 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 that 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/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`有一个删除按钮，但它自己并不知道该如何删除这个英雄。
|
||
最好的做法是触发一个事件来报告“删除用户”的请求。
|
||
|
||
Here are the pertinent excerpts from that `HeroDetailComponent`:
|
||
|
||
这里是来自`HeroDetailComponent`的相关摘要：
|
||
+makeExample('template-syntax/ts/app/hero-detail.component.ts',
|
||
'template-1', 'HeroDetailComponent.ts (template)')(format=".")
|
||
+makeExample('template-syntax/ts/app/hero-detail.component.ts',
|
||
'deleteRequest', 'HeroDetailComponent.ts (delete logic)')(format=".")
|
||
|
||
:marked
|
||
The component defines a `deleteRequest` property that returns an `EventEmitter`.
|
||
When the user clicks *delete*, the component invokes the `delete()` method
|
||
which tells 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`对象。
|
||
|
||
Now imagine a hosting parent component that binds to the `HeroDetailComponent`'s `deleteRequest` event.
|
||
|
||
现在，想象作为宿主的父组件绑定到了`HeroDetailComponent`的`deleteRequest`事件。
|
||
|
||
+makeExample('template-syntax/ts/app/app.component.html',
|
||
'event-binding-to-component')(format=".")
|
||
:marked
|
||
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`）。
|
||
|
||
### Template statements have side effects
|
||
### 模板语句有副作用
|
||
The `deleteHero` method has a side effect: it deletes a hero.
|
||
Template statement side effects are not just OK, they are expected.
|
||
|
||
`deleteHero`方法有一个副作用：它删除了一个英雄。
|
||
模板语句的副作用不仅没问题，反而正是我们所期待的。
|
||
|
||
Deleting the hero updates the model, perhaps triggering other changes
|
||
including queries and saves to a remote server.
|
||
These changes percolate through the system and are ultimately displayed in this and other views.
|
||
It's all good.
|
||
|
||
删除这个英雄会更新模型，还可能触发其它修改，包括向远端服务器的查询和保存。
|
||
这些变更通过系统进行扩散，并最终显示到当前以及其它视图中。
|
||
这都是好事。
|
||
|
||
//
|
||
:marked
|
||
### Event bubbling and propagation [TODO: reinstate this section when it becomes true]
|
||
Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements.
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".")
|
||
:marked
|
||
Many DOM events, both [native](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers ) and [custom](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events ), bubble up their ancestor tree of DOM elements until an event handler along the way prevents further propagation.
|
||
|
||
.l-sub-section
|
||
:marked
|
||
`EventEmitter` events don’t bubble.
|
||
|
||
:marked
|
||
The result of an event binding statement determines whether
|
||
[event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation)
|
||
continues or stops with the current element.
|
||
|
||
Event propagation stops if the binding statement returns a falsey value (as does a method with no return value).
|
||
Clicking the button in the next example triggers a save;
|
||
the click doesn't make it to the outer `<div>` so the div's save handler is not called.
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-no-propagation')(format=".")
|
||
:marked
|
||
Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button
|
||
and the outer `<div>`, causing a double save.
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".")
|
||
|
||
|
||
.l-main-section
|
||
:marked
|
||
<a id="ngModel"></a>
|
||
## Two-way binding with 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.
|
||
|
||
当开发数据输入表单时，我们通常希望既显示数据的属性，也在用户修改时更新那个属性。
|
||
|
||
The `[(ngModel)]` two-way data binding syntax makes that easy. Here's an example:
|
||
|
||
`[(NgModel)]`双向数据绑定语法让它变得简单，这里是例子：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
|
||
.callout.is-important
|
||
header [()] = banana in a box
|
||
header [()] = 盒子里的香蕉
|
||
:marked
|
||
To remember that the parentheses go inside the brackets, visualize a *banana in a box*.
|
||
|
||
要记住“方括号中的圆括号”这种语法，就把它想象成 *盒子里的香蕉* 吧，是不是很形象？
|
||
（译注：中国读者记起来更简单，方括号又叫中括号，圆括号又叫小括号，显然应该中的在外，小的在内）
|
||
:marked
|
||
Alternatively, we can use the canonical prefix form:
|
||
|
||
另外，我们也可以使用规范前缀形式：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-2')(format=".")
|
||
:marked
|
||
There’s a story behind this construction, a story that builds on the property and event binding techniques we learned previously.
|
||
|
||
在这个结构背后还有一个故事，一个关于如何构建我们以前学过的属性绑定和事件绑定技术的故事。
|
||
|
||
### Inside [(ngModel)]
|
||
### [(ngModel)]内幕
|
||
We could have achieved the same result with separate bindings to
|
||
the `<input>` element's `value` property and `input` event.
|
||
|
||
通过分别绑定到`<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 what event reports 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.
|
||
|
||
`ngModel`指令通过它自己的`ngModel`输入属性和`ngModelChange`输出属性隐藏了这些繁琐的细节。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-3')(format=".")
|
||
.l-sub-section
|
||
:marked
|
||
The `ngModel` input property sets the element's value property and the `ngModelChange` output property
|
||
listens for changes to the element's value.
|
||
The details are specific to each kind of element and therefore the `NgModel` directive only works for elements,
|
||
such as the input text box, that are supported by a [ControlValueAccessor](../api/common/ControlValueAccessor-interface.html).
|
||
We can't apply `[(ngModel)]` to our custom components until we write a suitable *value accessor*,
|
||
a technique that is beyond the scope of this chapter.
|
||
|
||
`ngModel`输入属性设置元素的值属性，而`ngModelChange`输出属性监听元素值的变化。
|
||
实现细节对每种元素都很特定，所以`NgModel`指令只和元素一起工作，比如输入框，它由[ControlValueAccessor](../api/common/ControlValueAccessor-interface.html)提供支持。
|
||
除非写一个合适的*值访问器*，否则我们不能把`[(ngModel)]`用在我们自己的自定义组件上。但*值访问器*技术超出了本章的范围。
|
||
:marked
|
||
Separate `ngModel` bindings is an improvement. We can do better.
|
||
|
||
把`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 — which it can with the `[( )]` syntax:
|
||
|
||
我们不该两次引用这个数据属性。Angular应该能捕获组件的数据属性，并且把它设置为一个简单的定义 —— 那就用`[( )]`语法吧：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-1')(format=".")
|
||
|
||
.l-sub-section
|
||
:marked
|
||
`[(ngModel)]` is a specific example of a more general pattern in which Angular "de-sugars" the `[(x)]` syntax
|
||
into an `x` input property for property binding and an `xChange` output property for event binding.
|
||
Angular constructs the event property binding's template statement by appending `=$event`
|
||
to the literal string of the template expression.
|
||
|
||
`[(ngModel)]`是一个更通用的模式中的具体例子，在这里，Angular会把`[(x)]`语法去掉语法糖，变成了一个供属性绑定用的输入属性`x`，和一个供事件绑定用的输出属性`xChange`。
|
||
Angular通过在模板表达式的原始字符串后面追加上`=$event`，来构建出供事件绑定用的模板语句。
|
||
|
||
We can write a two-way binding directive of our own to exploit this behavior.
|
||
|
||
利用这一行为，我们也可以自己写出具有双向绑定功能的指令。
|
||
|
||
<span style="font-family:courier">[(_x_)]="_e_" <==> [_x_]="_e_" (<i>x</i>Change)="_e_=$event"</span>
|
||
|
||
:marked
|
||
Is `[(ngModel)]` all we need? Is there ever a reason to fall back to its expanded form?
|
||
|
||
`[(ngModel)]`就是我们所需的一切吗？有没有什么理由需要仰仗到它的展开形式？
|
||
|
||
The `[( )]` 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.
|
||
|
||
`[( )]`语法只能_设置_一个数据绑定属性。
|
||
如果需要做更多或不同的事情，我们得自己写它的展开形式。
|
||
|
||
Let's try something silly like forcing the input value to uppercase:
|
||
|
||
来做点淘气的事儿吧，比如强制让输入值变成大写形式：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgModel-4')(format=".")
|
||
:marked
|
||
Here are all variations in action, including the uppercase version:
|
||
|
||
下面是实际操作中的所有变体形式，包括这个大写版本：
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
|
||
|
||
.l-main-section
|
||
: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个内建指令。
|
||
社区贡献了更多，这还没算为内部应用而创建的无数私有指令。
|
||
|
||
We don’t need many of those directives in Angular 2.
|
||
Quite often we can achieve the same results with the more capable and expressive Angular 2 binding system.
|
||
Why create a directive to handle a click when we can write a simple binding such as this?
|
||
|
||
在Angular 2中我们不需要那么多指令。
|
||
使用更强大、更富有表现力的Angular 2绑定系统，我们其实可以达到同样的效果。
|
||
如果我们能用一个这样的简单绑定达到目的，为什么还需要创建一个指令来处理点击事件？
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
||
:marked
|
||
We still benefit from directives that simplify complex tasks.
|
||
Angular still ships with built-in directives; just not as many.
|
||
We'll write our own directives, just not as many.
|
||
|
||
我们仍然可以从简化复杂任务的指令中获益。
|
||
Angular发布时仍然带有内建指令，只是没那么多了。
|
||
我们仍会写自己的指令，只是没那么多了。
|
||
|
||
This segment reviews some of the most frequently used built-in directives.
|
||
|
||
下面这部分就检阅一下那些最常用的内建指令。
|
||
|
||
<a id="ngClass"></a>
|
||
.l-main-section
|
||
:marked
|
||
### NgClass
|
||
|
||
We typically control how elements appear
|
||
by adding and removing CSS classes dynamically.
|
||
We can bind to `NgClass` to add or remove several classes simultaneously.
|
||
|
||
我们经常用动态添加或删除CSS类的方式来控制元素如何显示。
|
||
通过绑定到`NgClass`，我们可以同时添加或移除多个类。
|
||
|
||
A [class binding](#class-binding) is a good way to add or remove a *single* class.
|
||
|
||
[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`指令可能是更好的选择。
|
||
|
||
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`，这个类就会被加上，否则就会被移除。
|
||
|
||
:marked
|
||
Consider a component method such as `setClasses` that manages the state of three CSS classes:
|
||
|
||
考虑一个像`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`，并据此设置元素的类：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgClass-1')(format=".")
|
||
|
||
<a id="ngStyle"></a>
|
||
.l-main-section
|
||
:marked
|
||
### NgStyle
|
||
We can set inline styles dynamically, based on the state of the component.
|
||
Binding to `NgStyle` lets us set many inline styles simultaneously.
|
||
|
||
我们可以基于组件的状态动态设置内联样式。
|
||
绑定到`NgStyle`可以让我们同时设置很多内联样式。
|
||
|
||
A [style binding](#style-binding) is an easy way to set a *single* style value.
|
||
|
||
[样式绑定](#style-binding)是设置*单一*样式值的简单方式。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgStyle-1')(format=".")
|
||
:marked
|
||
The `NgStyle` directive may be the better choice
|
||
when we want to set *many* inline styles at the same time.
|
||
|
||
如果我们要同时设置*多个*内联样式，`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就是能用于这个样式的任何值。
|
||
|
||
Consider a component method such as `setStyles` that returns an object defining three styles:
|
||
|
||
考虑一个类似于`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`，并据此设置元素的样式：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgStyle-2')(format=".")
|
||
|
||
<a id="ngIf"></a>
|
||
.l-main-section
|
||
:marked
|
||
### NgIf
|
||
### NgIf
|
||
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上。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgIf-1')(format=".")
|
||
|
||
.alert.is-critical
|
||
:marked
|
||
Don't forget the asterisk (`*`) in front of `ngIf`.
|
||
For more information, see [\* and <template>](#star-template).
|
||
|
||
不要忘记了`ngIf`前面的星号（`*`）。
|
||
要了解更多，参见[\*与<template>](#star-template)。
|
||
:marked
|
||
Binding to a #{_falsey} expression removes the element subtree from the DOM.
|
||
|
||
绑定到一个假值表达式将从DOM中移除元素的子树。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgIf-2')(format=".")
|
||
|
||
block dart-no-truthy-falsey
|
||
//- N/A
|
||
|
||
:marked
|
||
#### Visibility and NgIf are not the same
|
||
#### 可见性和NgIf不是一回事
|
||
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)来显示和隐藏一个元素的子树（元素及其子元素）。
|
||
+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`排除一个子树是截然不同的。
|
||
|
||
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中。
|
||
子树中的组件及其状态仍然保留着。
|
||
即使对于不可见属性，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中实际移除了这个元素的子树。
|
||
它销毁了子树中的组件及其状态，也潜在释放了可观的资源，最终让用户体验到更好的性能。
|
||
|
||
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>
|
||
.l-main-section
|
||
:marked
|
||
### NgSwitch
|
||
We bind to `NgSwitch` when we want to display *one* element tree (an element and its children)
|
||
from a *set* of possible element trees, based on some condition.
|
||
Angular puts only the *selected* element tree into the DOM.
|
||
|
||
当需要从*一组*可能的元素树中根据条件显示*一个*时，我们就把它绑定到`NgSwitch`。
|
||
Angular将只把*选中的*元素树放进DOM中。
|
||
|
||
Here’s an example:
|
||
|
||
下面是例子：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch')(format=".")
|
||
:marked
|
||
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`绑定到一个能返回*开关值*的表达式。
|
||
本例中，这个值是字符串，但它也可能是任何类型的值。
|
||
|
||
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>`或者挂在一个*匹配值*表达式上，或者被标记为默认情况。
|
||
|
||
**At any particular moment, at most one of these *spans* is in the 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*。
|
||
.l-sub-section
|
||
:marked
|
||
We could substitute any element for the *span* in this example.
|
||
That element could be a `<div>` with a vast subtree of its own elements.
|
||
Only the matching `<div>` and its subtree would appear in the DOM;
|
||
the others would be removed.
|
||
|
||
我们可以用任何其它元素代替本例中的*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`：绑定到一个返回开关值的表达式
|
||
1. `ngSwitchWhen`: bound to an expression returning a match value
|
||
1. `ngSwitchWhen`：绑定到一个返回匹配值的表达式
|
||
1. `ngSwitchDefault`: a marker attribute on the default element
|
||
1. `ngSwitchDefault`：一个用于标记出默认元素的Attribute
|
||
|
||
.alert.is-critical
|
||
:marked
|
||
**Do *not*** put the asterisk (`*`) in front of `ngSwitch`. Use the property binding instead.
|
||
|
||
**不要**在`ngSwitch`的前面放星号（`*`），而应该用属性绑定。
|
||
|
||
**Do** put the asterisk (`*`) in front of `ngSwitchWhen` and `ngSwitchDefault`.
|
||
For more information, see [\* and <template>](#star-template).
|
||
|
||
**要**把星号（`*`）放在`ngSwitchWhen`和`ngSwitchDefault`的前面。
|
||
要了解更多信息，参见[\*与<template>](#star-template)。
|
||
|
||
<a id="ngFor"></a>
|
||
.l-main-section
|
||
:marked
|
||
### NgFor
|
||
### NgFor
|
||
`NgFor` is a _repeater_ directive — a way to customize data display.
|
||
|
||
`NgFor`是一个_重复器_指令 —— 自定义数据显示的一种方式。
|
||
|
||
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把这个块儿当做模板，渲染列表中的每个条目。
|
||
|
||
Here is an example of `NgFor` applied to a simple `<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`应用在一个组件元素上，就像这个例子中一样：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgFor-2')(format=".")
|
||
|
||
.alert.is-critical
|
||
:marked
|
||
Don't forget the asterisk (`*`) in front of `ngFor`.
|
||
For more information, see [\* and <template>](#star-template).
|
||
|
||
不要忘了`ngFor`前面的星号（`*`）。
|
||
要了解更多，参见[\*与<template>](#star-template)
|
||
:marked
|
||
The text assigned to `*ngFor` is the instruction that guides the repeater process.
|
||
|
||
赋值给`*ngFor`的文本是一个用于指导重复器如何工作的“操作指南”。
|
||
|
||
<a id="ngForMicrosyntax"></a>
|
||
:marked
|
||
#### NgFor microsyntax
|
||
#### NgFor微语法
|
||
The string assigned to `*ngFor` is not a [template expression](#template-expressions).
|
||
It’s a *microsyntax* — 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"`的含义是：
|
||
|
||
>*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可用*
|
||
|
||
Angular translates this instruction into a new set of elements and bindings.
|
||
|
||
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为数组中的每个英雄创建了此模板的一个全新实例。
|
||
|
||
The `let` keyword before `hero` creates a template input variable called `hero`.
|
||
|
||
`hero`前面的`let`关键字创建了一个名叫`hero`的模板输入变量。
|
||
|
||
.alert.is-critical
|
||
:marked
|
||
A template input variable is **not** the same as a [template reference variable](#ref-vars)!
|
||
|
||
模板输入变量和[模板引用变量](#ref-vars)**不是**一回事儿！
|
||
|
||
:marked
|
||
We use this variable within the template to access a hero’s properties,
|
||
as we’re doing in the interpolation.
|
||
We can also pass the variable in a binding to a component element,
|
||
as we're doing with `hero-detail`.
|
||
|
||
我们在模板中使用这个变量来访问英雄的属性，就像在插值表达式中所做的那样。
|
||
我们也可以把这个变量传给组件元素上的一个绑定，就像我们对`hero-detail`所做的那样。
|
||
|
||
:marked
|
||
#### NgFor with index
|
||
#### 带索引的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，并把它用在模板中。
|
||
|
||
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"这样的条目。
|
||
+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/NgFor-directive.html).
|
||
|
||
要学习更多的*类似index*的值，例如`last`、`even`和`odd`，请参阅[NgFor API 参考](../api/common/NgFor-directive.html)。
|
||
|
||
:marked
|
||
#### NgForTrackBy
|
||
The `ngFor` directive has the potential to perform poorly, especially with large lists.
|
||
A small change to one item, an item removed, or an item added can trigger a cascade of DOM manipulations.
|
||
|
||
`ngFor`指令有时候会性能较差，特别是在大型列表中。
|
||
对一个条目的一点小更改、移除或添加，都会导致级联的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 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`的对象其实是同一个英雄。
|
||
下面就是这样一个函数：
|
||
+makeExample('template-syntax/ts/app/app.component.ts', 'trackByHeroes')(format=".")
|
||
:marked
|
||
Now set the `NgForTrackBy` directive to that *tracking* function.
|
||
Angular offers a variety of equivalent syntax choices including these two:
|
||
|
||
现在，把`NgForTrackBy`指令设置为那个*追踪*函数。
|
||
Angular从语法上提供了等价的可选变体，比如这两个：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".")
|
||
:marked
|
||
The *tracking* function doesn't eliminate all DOM changes.
|
||
Angular may have to update the DOM element if the same-hero *properties* have changed.
|
||
But if the properties haven't changed — and most of the time they will not have changed —
|
||
Angular can leave those DOM elements alone. The list UI will be smoother and more responsive.
|
||
|
||
*追踪*函数不会排除所有DOM更改。
|
||
如果用来判断是否同一个英雄的*属性*变化了，Angular就可能不得不更新DOM元素。
|
||
但是如果这个属性没有变化 —— 而且大多数时候它们不会变化 ——
|
||
Angular就能留下这些DOM元素。列表界面就会更加平滑，提供更好的响应。
|
||
|
||
Here is an illustration of the `NgForTrackBy` effect.
|
||
|
||
这里是关于`NgForTrackBy`效果的一个插图。
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/template-syntax/ng-for-track-by-anim.gif' alt="NgForTrackBy")
|
||
|
||
<a id="star-template"></a>
|
||
<a id="structural-directive"></a>
|
||
.l-main-section
|
||
:marked
|
||
## `*` and <template>
|
||
## `*`与<template>
|
||
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`内建指令时，我们使用了一种古怪的语法：出现在指令名称前面的星号（`*`）。
|
||
|
||
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布局的指令更易于读写。
|
||
`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元素上。
|
||
|
||
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>`标签中的。
|
||
|
||
:marked
|
||
### Expanding `*ngIf`
|
||
### 展开`*ngIf`
|
||
We can do what Angular does ourselves and expand the `*` prefix syntax to template syntax. Here's some code with `*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`。
|
||
|
||
The first expansion step transports the `ngIf` (without the `*` prefix) and its contents
|
||
into an expression assigned to a `template` directive.
|
||
|
||
展开的第一步是把`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)中：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'Template-2')(format=".")
|
||
:marked
|
||
Notice that the `[hero]="currentHero"` binding remains on the child `<hero-detail>`
|
||
element inside the template.
|
||
|
||
注意，`[hero]="currengHero"`绑定留在了模板中的子元素`<hero-detail>`上。
|
||
|
||
block remember-the-brackets
|
||
.callout.is-critical
|
||
header Remember the brackets!
|
||
header 别忘了括号！
|
||
:marked
|
||
Don’t make the mistake of writing `ngIf="currentHero"`!
|
||
That syntax assigns the *string* value "currentHero" to `ngIf`.
|
||
In JavaScript a non-empty string is a truthy value, so `ngIf` would always be
|
||
`true` and Angular would always display the `hero-detail`
|
||
... even when there is no `currentHero`!
|
||
|
||
不要误写为`ngIf="currentHero"`！
|
||
这种语法会把一个字符串"currentHero"赋值给`ngIf`。
|
||
在JavaScript中，非空的字符串是真值，所以`ngIf`总会是`true`，而Angular将永远显示`hero-detail`…… 即使根本没有`currentHero`！
|
||
|
||
:marked
|
||
### Expanding `*ngSwitch`
|
||
### 展开`*ngSwitch`
|
||
A similar transformation applies to `*ngSwitch`. We can de-sugar the syntax ourselves.
|
||
Here's an example, first with `*ngSwitchWhen` and `*ngSwitchDefault` and then again with `<template>` tags:
|
||
|
||
类似的转换也作用于`*ngSwitch`上。我们可以自己解开这个语法糖。
|
||
这里是一个例子，首先是`*ngSwitchWhen`和`*ngSwitchDefault`，然后再解出`<template>`标签：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'NgSwitch-expanded')(format=".")
|
||
:marked
|
||
The `*ngSwitchWhen` and `*ngSwitchDefault` expand in exactly the same manner as `*ngIf`,
|
||
wrapping their former elements in `<template>` tags.
|
||
|
||
`*ngSwitchWhen`和`*ngSwitchDefault`用和`*ngIf`完全相同的方式展开，把它们以前的元素包裹在`<template>`标签中。
|
||
|
||
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`本身不能用星号（*）前缀的原因了吧？
|
||
它没有定义内容，它的工作是控制一组模板。
|
||
|
||
In this case, it governs two sets of `NgSwitchWhen` and `NgSwitchDefault` directives.
|
||
We should expect it to display the values of the selected template twice,
|
||
once for the (*) prefixed version and once for the expanded template version.
|
||
That's exactly what we see in this example:
|
||
|
||
上面这种情况下，它管理两组`NgSwitchWhen`和`NgSwitchDefault`指令，一次是（*）前缀的版本，一次是展开模板后的版本。
|
||
我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的：
|
||
figure.image-display
|
||
img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
|
||
:marked
|
||
### Expanding `*ngFor`
|
||
### 展开`*ngFor`
|
||
The `*ngFor` undergoes a similar transformation. We begin with an `*ngFor` example:
|
||
|
||
`*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:
|
||
|
||
这里是在把`ngFor`传进`template`指令后的同一个例子：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'Template-3')(format=".")
|
||
:marked
|
||
And here it is expanded further into a `<template>` tag wrapping the original `<hero-detail>` element:
|
||
|
||
这里，它被进一步扩展成了包裹着原始`<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本身要简单多了。
|
||
|
||
<a id="ref-vars"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Template reference variables
|
||
## 模板引用变量
|
||
|
||
A **template reference variable** is a reference to an DOM element or directive within a template.
|
||
|
||
**模板引用变量**是模板中对DOM元素或指令的引用。
|
||
|
||
It can be used with native DOM elements but also with Angular 2 components — in fact, it will work with any custom web component.
|
||
|
||
它能在原生DOM元素中使用，也能用于Angular 2组件 —— 实际上，它可以和任何自定义Web组件协同工作。
|
||
|
||
:marked
|
||
### Referencing a template reference variable
|
||
### 引用一个模板引用变量
|
||
|
||
We can reference a template reference variable on the same element, on a sibling element, or on
|
||
any child elements.
|
||
|
||
我们可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。
|
||
|
||
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`变量。
|
||
.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`变量。
|
||
|
||
:marked
|
||
### How a variable gets its value
|
||
### 如何获取变量的值
|
||
|
||
Angular sets the variable's value to the element on which it was defined.
|
||
We defined these variables on the `input` elements.
|
||
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`方法。
|
||
|
||
:marked
|
||
### NgForm and template reference variables
|
||
### 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 — and it's not simple at all.
|
||
|
||
正如我们在[表单](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。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'ref-form-a')(format=".")
|
||
:marked
|
||
What is the value of `theForm`?
|
||
|
||
`theForm`变量的值是什么？
|
||
|
||
It would be the [HTMLFormElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement)
|
||
if Angular hadn't taken it over.
|
||
It's actually `ngForm`, a reference to the Angular built-in `NgForm` directive that wraps the native `HTMLFormElement`
|
||
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`并赋予它额外的“超能力”，比如跟踪用户输入的有效性。
|
||
|
||
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)。）
|
||
|
||
<a id="inputs-outputs"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Input and output properties
|
||
## 输入与输出属性
|
||
So far, we’ve focused mainly on binding to component members within template expressions and statements
|
||
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
|
||
:marked
|
||
Remember: All **components** are **directives**.
|
||
|
||
记住：所有**组件**皆为**指令**。
|
||
:marked
|
||
.l-sub-section
|
||
:marked
|
||
We're drawing a sharp distinction between a data binding **target** and a data binding **source**.
|
||
|
||
我们要重点突出下绑定**目标**和绑定**源**的区别。
|
||
|
||
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`是组件的成员，它们在`=`右侧引号中的语法中被引用了。
|
||
+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.
|
||
|
||
它们既不是组件的*输入*也不是*输出*。它们是绑定的数据源。
|
||
|
||
Now look at `HeroDetailComponent` when it is the **target of a binding**.
|
||
|
||
现在，看看`HeroDetailComponent`，它是**绑定的目标**。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'io-2')(format=".")
|
||
:marked
|
||
Both `HeroDetailComponent.hero` and `HeroDetailComponent.deleteRequest` are on the **left side** of binding declarations.
|
||
`HeroDetailComponent.hero` is inside brackets; it is the target of a property binding.
|
||
`HeroDetailComponent.deleteRequest` is inside parentheses; it is the target of an event binding.
|
||
|
||
`HeroDetailComponent.hero`和`HeroDetailComponent.deleteRequest`都在绑定声明的**左侧**。
|
||
`HeroDetailComponent.hero`在方括号中，它是一个属性绑定的目标。
|
||
`HeroDetailComponent.deleteRequest`在圆括号中，它是一个事件绑定的目标。
|
||
|
||
### Declaring input and output properties
|
||
### 声明输入和输出属性
|
||
Target properties must be explicitly marked as inputs or outputs.
|
||
|
||
目标属性必须被显式的标记为输入或输出。
|
||
|
||
When we peek inside `HeroDetailComponent`, we see that these properties are marked
|
||
with decorators as input and output properties.
|
||
|
||
当我们深入`HeroDetailComponent`内部时，就会看到这些属性被装饰器标记成了输入和输出属性。
|
||
+makeExample('template-syntax/ts/app/hero-detail.component.ts', 'input-output-1')(format=".")
|
||
|
||
:marked
|
||
.l-sub-section
|
||
:marked
|
||
Alternatively, we can identify members in the `inputs` and `outputs` #{_array}s
|
||
of the directive metadata, as in this example:
|
||
|
||
另外，我们还可以在指令元数据的`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`对象。
|
||
|
||
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="输入和输出")
|
||
: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.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`视角的**输出**属性，因为事件流来自这个属性，并且被模板绑定语句所处理。
|
||
|
||
h3#aliasing-io Aliasing input/output properties
|
||
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)时的常见情况。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(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消息的属性就算不上一个好名字。
|
||
|
||
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`属性。
|
||
|
||
We can specify the alias for the property name by passing it into the input/output decorator like this:
|
||
|
||
通过把别名传进@Input/@Output装饰器，我们可以为属性指定别名，就像这样：
|
||
|
||
+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-1')(format=".")
|
||
|
||
.l-sub-section
|
||
:marked
|
||
We can also alias property names in the `inputs` and `outputs` #{_array}s.
|
||
We write a colon-delimited (`:`) string with
|
||
the directive property name on the *left* and the public alias on the *right*:
|
||
|
||
我们也能在`inputs`和`outputs`数组中为属性指定别名。
|
||
我们可以写一个冒号（`:`）分隔的字符串，*左侧*是指令中的属性名，*右侧*则是公开的别名。
|
||
+makeExample('template-syntax/ts/app/my-click.directive.ts', 'my-click-output-2')(format=".")
|
||
|
||
<a id="expression-operators"></a>
|
||
.l-main-section
|
||
:marked
|
||
## Template expression operators
|
||
## 模板表达式操作符
|
||
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语法的一个子集，并补充了几个用于特定场景的特殊操作符。
|
||
这里我们讲其中的两个：_管道_和_安全导航操作符_。
|
||
|
||
: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)对像这样的小型转换来说是个明智的选择。
|
||
管道是一个简单的函数，它接受一个输入值，并返回转换结果。
|
||
它们很容易用于模板表达式中，只要使用**管道操作符（`|`）**就行了。
|
||
+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.
|
||
|
||
管道操作符会把它左侧的表达式结果传给它右侧的管道函数。
|
||
|
||
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`管道是特别设计来帮助我们调试绑定的：
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'pipes-json')(format=".")
|
||
:marked
|
||
The generated output would look something like this
|
||
|
||
它生成的输出是类似于这样的：
|
||
code-example(language="json").
|
||
{ "firstName": "Hercules", "lastName": "Son of Zeus",
|
||
"birthdate": "1970-02-25T08:00:00.000Z",
|
||
"url": "http://www.imdb.com/title/tt0065832/",
|
||
"rate": 325, "id": 1 }
|
||
|
||
:marked
|
||
<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`为空时，保护视图渲染器，让它免于失败。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'safe-2')(format=".")
|
||
|
||
block dart-safe-nav-op
|
||
//- N/A
|
||
|
||
:marked
|
||
Let’s elaborate on the problem and this particular solution.
|
||
|
||
我们来详细阐述一下这个问题和解决方案：
|
||
|
||
What happens when the following data bound `title` property is null?
|
||
|
||
如果下列数据绑定中`title`属性为空，会发生什么？
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'safe-1')(format=".")
|
||
:marked
|
||
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”，它后面却没有任何东西。
|
||
这是合理的行为。至少应用没有崩溃。
|
||
|
||
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`。
|
||
|
||
code-example(language="html").
|
||
The null hero's name is {{nullHero.firstName}}
|
||
|
||
block null-deref-example
|
||
:marked
|
||
JavaScript throws a null reference error, and so does Angular:
|
||
|
||
JavaScript抛出了一个空引用错误，Angular也是如此：
|
||
code-example(format="nocode").
|
||
TypeError: Cannot read property 'firstName' of null in [null].
|
||
|
||
:marked
|
||
Worse, the *entire view disappears*.
|
||
|
||
晕，*整个视图都不见了*。
|
||
|
||
We could claim that this is reasonable behavior if we believed that the `hero` property must never be null.
|
||
If it must never be null and yet it is null,
|
||
we've made a programming error that should be caught and fixed.
|
||
Throwing an exception is the right thing to do.
|
||
|
||
如果确信`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`属性所做的那样。
|
||
|
||
Unfortunately, our app crashes when the `currentHero` is null.
|
||
|
||
不幸的是，当`currentHero`为空的时候，我们的应用崩溃了。
|
||
|
||
We could code around that problem with [NgIf](#ngIf).
|
||
|
||
我们可以通过写[NgIf](#ngIf)代码来解决这个问题。
|
||
+makeExample('template-syntax/ts/app/app.component.html', 'safe-4')(format=".")
|
||
|
||
block safe-op-alt
|
||
:marked
|
||
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
|
||
These approaches have merit but can be cumbersome, especially if the property path is long.
|
||
Imagine guarding against a null somewhere in a long property path such as `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安全导航操作符（`?.`）是在属性路径中保护空值的一个更加流畅、便利的方式。
|
||
表达式会在它遇到第一个空值的时候跳出。
|
||
显示是空的，但是应用正常工作，而没有发生错误。
|
||
+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`.
|
||
|
||
在像`a?.b?.c?.d`这样的长属性路径中，它工作得很完美。
|
||
|
||
.l-main-section
|
||
:marked
|
||
## Summary
|
||
## 小结
|
||
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.
|
||
|
||
我们完成了模板语法的概述。现在，我们该把如何写组件和指令的知识投入到实际工作当中了。
|