模板语法

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 类的实例(组件)和面向用户的模板来与用户交互。

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:

来看看写视图的模板都需要什么。本章将覆盖模板语法中的下列基本元素:

The demonstrates all of the syntax and code snippets described in this chapter.

在线例子演示了本章中描述的所有语法和代码片段。

HTML

HTML

HTML is the language of the Angular template. The QuickStart application has a template that is pure HTML:

HTML 是 Angular 模板的语言。快速起步应用的模板是纯 HTML 的:

Hello Angular

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. In the following sections we are going to learn how to get and set DOM (Document Object Model) values dynamically through data binding.

可以通过组件和指令来扩展模板中的 HTML 词汇。它们看上去就是新元素和属性。接下来将学习如何通过数据绑定来动态获取/设置 DOM(文档对象模型)的值。

Let’s turn to the first form of data binding — interpolation — to see how much richer template HTML can be.

数据绑定的第一种形式 —— 插值表达式 —— 展示了模板的 HTML 可以有多丰富。

Interpolation

插值表达式

We met the double-curly braces of interpolation, {{ and }}, early in our Angular education.

在以前的 Angular 教程中,我们遇到过由双花括号括起来的插值表达式,{{}}

<p>My current hero is {{currentHero.firstName}}</p>

We use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.

插值表达式可以把计算后的字符串插入到 HTML 元素标签内的文本或对标签的属性进行赋值。

<h3> {{title}} <img src="{{heroImageUrl}}" style="height:30px"> </h3>

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 the example above, Angular evaluates the title and heroImageUrl properties and "fills in the blanks", first displaying a bold application title and then a heroic image.

在括号之间的“素材”,通常是组件属性的名字。Angular 会用组件中相应属性的字符串值,替换这个名字。 上例中,Angular 计算titleheroImageUrl属性的值,并把它们填在空白处。 首先显示粗体的应用标题,然后显示英雄的图片。

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 先对它求值,再把它转换成字符串。 下列插值表达式通过把括号中的两个数字相加说明了这一点:

<!-- "The sum of 1 + 1 is 2" --> <p>The sum of 1 + 1 is {{1 + 1}}</p>

The expression can invoke methods of the host component, as we do here with getVal():

这个表达式可以调用宿主组件的方法,就像下面用的getVal()

<!-- "The sum of 1 + 1 is not 4" --> <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>

Angular evaluates all expressions in double curly braces, converts the expression results to strings, and links them with neighboring literal strings. Finally, it assigns this composite interpolated result to an element or directive property.

Angular 对所有双花括号中的表达式求值,把求值的结果转换成字符串,并把它们跟相邻的字符串字面量连接起来。最后,把这个组合出来的插值结果赋给元素或指令的属性

We appear to be inserting the result between element tags and assigning it to attributes. It's convenient to think so, and we rarely suffer for this mistake. Though this is not exactly true. Interpolation is a special syntax that Angular converts into a property binding, and is explained below.

表面上看,我们在元素标签之间插入了结果和对标签的属性进行了赋值。 这样思考起来很方便,并且这个误解很少给我们带来麻烦。 但严格来讲,这是不对的。插值表达式是一个特殊的语法,Angular 把它转换成了属性绑定,后面将会解释这一点。

But first, let's take a closer look at template expressions and statements.

讲解属性绑定之前,先深入了解一下模板表达式和模板语句。

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 section, appearing in quotes to the right of the = symbol as in [property]="expression".

当我们写{{1 + 1}}时,是往插值表达式的括号中放进了一个模板表达式。 在属性绑定中会再次看到模板表达式,它出现在=右侧的引号中,看起来像这样:[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 中那些具有或可能引发副作用的表达式是被禁止的,包括:

Other notable differences from JavaScript syntax include:

和 JavaScript语 法的其它显著不同包括:

Expression context

表达式上下文

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.

也许更让人吃惊的是,模板表达式不能引用全局命名空间中的任何东西。 不能引用windowdocument。不能调用console.logMath.max。 它们被局限于只能访问来自表达式上下文中的成员。

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 ({{title}}) 时,我们就知道title是这个数据绑定组件中的一个属性。 当看到[disabled]="isUnchanged"中的 isUnchanged 时,我们就知道正在引用该组件的isUnchanged属性。

The component itself is usually the expression context, in which case the template expression usually references that component.

通常,组件本身就是表达式的上下文,这种情况下,模板表达式会引用那个组件。

The expression context can include objects other than the component. A template reference variable is one such alternative context object.

表达式的上下文可以包括组件之外的对象。 模板引用变量就是备选的上下文对象之一。

Expression guidelines

表达式指南

Template expressions can make or break an application. Please follow these guidelines:

模板表达式能成就或毁掉一个应用。请遵循下列指南:

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 expression is ideal because it is free of side effects and improves Angular's change detection performance.

最好使用幂等的表达式,因为它没有副作用,并且能提升 Angular 变更检测的性能。

In Angular terms, an idempotent expression always returns exactly the same thing until one of its dependent values changes.

在 Angular 的术语中,幂等的表达式应该总是返回完全相同的东西,直到某个依赖值发生改变。

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.

在单独的一次事件循环中,被依赖的值不应该改变。 如果幂等的表达式返回一个字符串或数字,连续调用它两次,也应该返回相同的字符串或数字。 如果幂等的表达式返回一个对象(包括DateArray),连续调用它两次,也应该返回同一个对象的引用

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 section, appearing in quotes to the right of the = symbol as in (event)="statement".

模板语句将在事件绑定一节看到,它出现在=号右侧的引号中,就像这样:(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.

模板语句有副作用。 这正是用户输入更新应用状态的方式。 否则,响应事件就没有什么意义了。

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 中“单向数据流”的另一面。 在一次事件循环中,可以随意改变任何地方的任何东西。

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 ; or ,).

和模板表达式一样,模板语句使用的语言也像 JavaScript。 模板语句解析器和模板表达式解析器有所不同,特别之处在于它支持基本赋值 (=) 和表达式链 (;,)。

However, certain JavaScript syntax is not allowed:

然而,某些 JavaScript 语法仍然是不允许的:

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.

和表达式中一样,语句只能引用语句上下文中 —— 通常是正在绑定事件的那个组件实例

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

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 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.

语句上下文可以包含组件之外的对象。 模板引用对象就是备选上下文对象之一。 在事件绑定语句中,经常会看到被保留的$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.

现在,对模板表达式和语句有了一点感觉了吧。 除插值表达式外,还有各种各样的数据绑定语法,是学习它们是时候了。

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:

根据数据流的方向,可以把所有绑定归为三类。 每一类都有它独特的语法:

Data direction

数据方向

Syntax

语法

Binding type

绑定类型

One-way

单向

from data source

从数据源

to view target

到视图目标

{{expression}} [target] = "expression" bind-target = "expression"

Interpolation

插值表达式

Property

Property

Attribute

Attribute

Class

Style

样式

One-way

单向

from view target

从视图目标

to data source

到数据源

(target) = "statement" on-target = "statement"

Event

事件

Two-way

双向

[(target)] = "expression" bindon-target = "expression"

Two-way

双向

译注:由于 HTML attribute 和 DOM property 在中文中都被翻译成了“属性”,无法区分, 而接下来的部分重点是对它们进行比较。

我们无法改变历史,因此,在本章的翻译中,保留了它们的英文形式,不加翻译,以免混淆。 本章中,如果提到“属性”的地方,一定是指 property,因为在 Angular 中,实际上很少涉及 attribute。

但在其它章节中,为简单起见,凡是能通过上下文明显区分开的,就仍统一译为“属性”, 区分不明显的,会加注英文。

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 来修改那些元素。

<div class="special">Mental Model</div> <img src="images/hero.png"> <button disabled>Save</button>

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 元素在模板中使用。

<!-- Normal HTML --> <div class="special">Mental Model</div> <!-- Wow! A new element! --> <hero-detail></hero-detail>

That’s HTML Plus.

这就是HTML+。

Now we start to learn about data binding. The first binding we meet might look like this:

现在开始学习数据绑定。我们碰到的第一种数据绑定看起来是这样的:

<!-- Bind button disabled state to `isUnchanged` property --> <button [disabled]="isUnchanged">Save</button>

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属性的当前值。

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 思维模式在误导我们。 实际上,一旦开始数据绑定,就不再跟 HTML attribute 打交道了。 这里不是设置 attribute,而是设置 DOM 元素、组件和指令的 property。

HTML attribute vs. DOM property

HTML attribute 与 DOM property 的对比

The distinction between an HTML attribute and a DOM property is crucial to understanding how Angular binding works.

要想理解 Angular 绑定如何工作,重点是搞清 HTML attribute 和 DOM property 之间的区别。

Attributes are defined by HTML. Properties are defined by the DOM (Document Object Model).

attribute 是由 HTML 定义的。property 是由 DOM (Document Object Model) 定义的。

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 元素的 attribute,就会发现确实没变: input.getAttribute('value') // 返回 "Bob"

The HTML attribute value specifies the initial value; the DOM value property is the current value.

HTML attribute value指定了初始值;DOM value property 是当前值。

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 propertyfalse,因为默认情况下按钮是可用的。 当我们添加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 也不是同一样东西。

This is so important, we’ll say it again.

这句话很重要,得再强调一次:

Template binding works with properties and events, not attributes.

模板绑定是通过 property事件来工作的,而不是 attribute

A world without attributes
没有 attribute 的世界

In the world of Angular, the only role of attributes is to initialize element and directive state. When we data bind, we're dealing exclusively with element and directive properties and events. Attributes effectively disappear.

在 Angular 的世界中,attribute 唯一的作用是用来初始化元素和指令的状态。 当进行数据绑定时,只是在与元素和指令的 property 和事件打交道,而 attribute 就完全靠边站了。

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 名。 下面是的汇总表:

Binding type

绑定类型

Target

目标

Examples

范例

Property

Property

Element property

元素的 property

Component property

组件的 property

Directive property

指令的 property

<img [src] = "heroImageUrl"> <hero-detail [hero]="currentHero"></hero-detail> <div [ngClass] = "{selected: isSelected}"></div>

Event

事件

Element event

元素的事件

Component event

组件的事件

Directive event

指令的事件

<button (click) = "onSave()">Save</button> <hero-detail (deleteRequest)="deleteHero()"></hero-detail> <div (myClick)="clicked=$event">click me</div>

Two-way

双向

Event and property

事件与 property

<input [(ngModel)]="heroName">
Attribute

Attribute (the exception)

attribute(例外情况)

<button [attr.aria-label]="help">help</button>

Class

CSS 类

class property

<div [class.special]="isSpecial">Special</div>

Style

样式

style property

<button [style.color] = "isSpecial ? 'red' : 'green'">

Let’s descend from the architectural clouds and look at each of these binding types in concrete detail.

让我们从结构性云层中走出来,看看每种绑定类型的具体情况。

Property binding

属性 (property) 绑定

We write a template property binding when we want to set a property of a view element to the value of a template expression.

当要把视图元素的属性 (property) 设置为模板表达式时,就要写模板的属性 (property) 绑定

The most common property binding sets an element property to a component property value. An example is binding the src property of an image element to a component’s heroImageUrl property:

最常用的属性绑定是把元素属性设置为组件属性的值。 下面这个例子中,image 元素的src属性会被绑定到组件的heroImageUrl属性上:

<img [src]="heroImageUrl">

Another example is disabling a button when the component says that it isUnchanged:

另一个例子是当组件说它isUnchanged(未改变)时禁用按钮:

<button [disabled]="isUnchanged">Cancel is disabled</button>

Another is setting a property of a directive:

另一个例子是设置指令的属性:

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

Yet another is setting the model property of a custom component (a great way for parent and child components to communicate):

还有另一个例子是设置自定义组件的模型属性(这是父子组件之间通讯的重要途径):

<hero-detail [hero]="currentHero"></hero-detail>

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.

不能使用属性绑定来从目标元素拉取值,也不能绑定到目标元素的属性来读取它。只能设置它。

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.

如果这个元素触发了事件,可以通过事件绑定来监听它们。

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 and ContentChild.

如果必须读取目标元素上的属性或调用它的某个方法,得用另一种技术。 参见 API 参考手册中的 ViewChildContentChild

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属性。

<img [src]="heroImageUrl">

Some people prefer the bind- prefix alternative, known as the canonical form:

有些人喜欢用bind-前缀的可选形式,并称之为规范形式

<img bind-src="heroImageUrl">

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.

目标的名字总是 property 的名字。即使它看起来和别的名字一样。 看到src时,可能会把它当做 attribute。不!它不是!它是 image 元素的 property 名。

Element properties may be the more common targets, but Angular looks first to see if the name is a property of a known directive, as it is in the following example:

元素属性可能是最常见的绑定目标,但 Angular 会先去看这个名字是否是某个已知指令的属性名,就像下面的例子中一样:

<div [ngClass]="classes">[ngClass] binding to the classes property</div>

Technically, Angular is matching the name to a directive input, 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 正在匹配指令的输入属性的名字。 这个名字是指令的inputs数组中所列的名字,或者是带有@Input()装饰器的属性。 这些输入属性被映射为指令自己的属性。

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对象:

<hero-detail [hero]="currentHero"></hero-detail>

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:

不要出现这样的失误:

<!-- ERROR: HeroDetailComponent.hero expects a Hero object, not the string "currentHero" --> <hero-detail hero="currentHero"></hero-detail>

One-time string initialization

一次性字符串初始化

We should omit the brackets when all of the following are true:

当下列条件满足时,应该省略括号:

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,这种方式也可以用在初始化指令和组件的属性。 下面这个例子把HeroDetailComponentprefix属性初始化为固定的字符串,而不是模板表达式。Angular 设置它,然后忘记它。

<hero-detail prefix="You are my" [hero]="currentHero"></hero-detail>

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:

我们通常得在插值表达式和属性绑定之间做出选择。 下列这几对绑定做的事情完全相同:

<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p> <p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p> <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p> <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

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.

没有技术上的理由能决定哪种形式更好。 我们倾向于可读性,所以倾向于插值表达式。 建议建立代码风格规则,选择一种形式, 这样,既遵循了规则,又能让手头的任务做起来更自然。

Content security

内容安全

Imagine the following malicious content.

假设下面的恶毒内容

evilTitle = 'Template <script>alert("evil never sleeps")</script>Syntax';

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 泄漏到浏览器中。

<p><span>"{{evilTitle}}" is the <i>interpolated</i> evil title.</span></p> <p>"<span [innerHTML]="evilTitle"></span>" is the <i>property bound</i> evil title.</p>

Interpolation handles the script tags differently than property binding but both approaches render the content harmlessly.

插值表达式处理 script 标签与属性绑定有所不同,但是二者都只渲染没有危害的内容。

evil title made safe

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 的值。

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.

这是“绑定到目标属性 (property)”这条规则中唯一的例外。这是唯一的能创建和设置 attribute 的绑定形式。

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, 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.

考虑 ARIASVG 和 table 中的 colspan/rowspan 等 attribute。 它们是纯粹的 attribute,没有对应的属性可供绑定。

We become painfully aware of this fact when we try to write something like this:

如果想写出类似下面这样的东西,现状会令我们痛苦:

<tr><td colspan="{{1 + 1}}">Three-Four</td></tr>

We get this error:

会得到这个错误:

Template parse errors: Can't bind to 'colspan' since it isn't a known native property 模板解析错误:不能绑定到 'colspan',因为它不是已知的原生属性

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。

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]绑定到一个计算值:

<table border=1> <!-- expression calculates colspan=2 --> <tr><td [attr.colspan]="1 + 1">One-Two</td></tr> <!-- ERROR: There is no `colspan` property to set! <tr><td colspan="{{1 + 1}}">Three-Four</td></tr> --> <tr><td>Five</td><td>Six</td></tr> </table>

Here's how the table renders:

这里是表格渲染出来的样子:

One-Two
FiveSix

One of the primary use cases for attribute binding is to set ARIA attributes, as in this example:

attribute 绑定的主要用例之一是设置 ARIA attribute(译注:ARIA指可访问性,用于给残障人士访问互联网提供便利), 就像这个例子中一样:

<!-- create and set an aria attribute for assistive technology --> <button [attr.aria-label]="actionName">{{actionName}} with Aria</button>

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 时是这样的:

<!-- standard class attribute setting --> <div class="bad curly special">Bad curly special</div>

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 设置的内容会被完全覆盖)

<!-- reset/override all class names with a binding --> <div class="bad curly special" [class]="badCurly">Bad curly</div>

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 会添加这个类,反之则移除它。

<!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div> <!-- binding to `class.special` trumps the class attribute --> <div class="special" [class.special]="!isSpecial">This one is not so special</div>

While this is a fine way to toggle a single class name, we generally prefer the NgClass directive for managing multiple class names at the same time.

虽然这是切换单一类名的好办法,但我们通常更喜欢使用 NgClass指令 来同时管理多个类名。

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]

<button [style.color] = "isSpecial ? 'red': 'green'">Red</button> <button [style.background-color]="canSave ? 'cyan': 'grey'" >Save</button>

Some style binding styles have unit extension. Here we conditionally set the font size in “em” and “%” units .

有些样式绑定中的样式带有单位。在这里,以根据条件用 “em” 和 “%” 来设置字体大小的单位。

<button [style.font-size.em]="isSpecial ? 3 : 1" >Big</button> <button [style.font-size.%]="!isSpecial ? 150 : 50" >Small</button>

While this is a fine way to set a single style, we generally prefer the NgStyle directive when setting several inline styles at the same time.

虽然这是设置单一样式的好办法,但我们通常更喜欢使用 NgStyle指令 来同时设置多个内联样式。

Note that a style property name can be written in either dash-case, as shown above, or camelCase, such as fontSize.

注意,样式属性命名方法可以用中线命名法,像上面的一样 也可以用驼峰式命名法,如fontSize

Event binding

事件绑定

The bindings we’ve met so far flow data in one direction: from a component to an element.

前面遇到的绑定的数据流都是单向的:从组件到元素

Users don’t just stare at the screen. They enter text into input boxes. They pick items from lists. They click buttons. Such user actions may result in a flow of data in the opposite direction: from an element to a 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 on the right. The following event binding listens for the button’s click event, calling the component's onSave() method whenever a click occurs:

事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成。 下面事件绑定监听按钮的点击事件。每当点击发生时,都会调用组件的onSave()方法。

<button (click)="onSave()">Save</button>

Target event

目标事件

A name between parentheses — for example, (click) — identifies the target event. In the following example, the target is the button’s click event.

圆括号中的名称 —— 比如(click) —— 标记出目标事件。在下面例子中,目标是按钮的 click 事件。

<button (click)="onSave()">Save</button>

Some people prefer the on- prefix alternative, known as the canonical form:

有些人更喜欢带on-前缀的备选形式,称之为规范形式

<button on-click="onSave()">On Save</button>

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 会先看这个名字是否能匹配上已知指令的事件属性,就像下面这个例子:

<!-- `myClick` is an event on the custom `ClickDirective` --> <div (myClick)="clickMessage=$event">click with myClick</div>

The myClick directive is further described in the section on aliasing input/output properties.

更多关于该myClick指令的解释,见给输入/输出属性起别名

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, which performs an action in response to the event, such as storing a value from the HTML control into 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. If the target event is a native DOM element event, then $event is a DOM event object, with properties such as target and target.value.

事件对象的形态取决于目标事件。如果目标事件是原生 DOM 元素事件, $event就是 DOM事件对象,它有像targettarget.value这样的属性。

Consider this example:

考虑这个范例:

<input [value]="currentHero.firstName" (input)="currentHero.firstName=$event.target.value" >

This code sets the input box value property by binding to the firstName property. To listen for changes to the value, the code binds to the input box's input event. When the user makes changes, the input event is raised, and the binding executes the statement within a context that includes the DOM event object, $event.

上面的代码在把输入框的value属性绑定到firstName属性。 要监听对值的修改,代码绑定到输入框的input事件。 当用户造成更改时,input事件被触发,并在包含了 DOM 事件对象 ($event) 的上下文中执行这条语句。

To update the firstName property, the changed text is retrieved by following the path $event.target.value.

要更新firstName属性,就要通过路径$event.target.value来获取更改后的值。

If the event belongs to a directive (recall that components are directives), $event has whatever shape the directive decides to produce.

如果事件属于指令(回想一下,组件是指令的一种),那么$event具体是什么由指令决定。

Custom events with EventEmitter

使用 EventEmitter 实现自定义事件

Directives typically raise custom events with an Angular EventEmitter. The directive creates an EventEmitter and exposes it as a property. The directive calls EventEmitter.emit(payload) to fire an event, passing in a message payload, which can be anything. Parent directives listen for the event by binding to this property and accessing the payload through the $event object.

通常,指令使用 Angular EventEmitter 来触发自定义事件。 指令创建一个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

HeroDetailComponent.ts (模板)

template: ` <div> <img src="{{heroImageUrl}}"> <span [style.text-decoration]="lineThrough"> {{prefix}} {{hero?.fullName}} </span> <button (click)="delete()">Delete</button> </div>`

HeroDetailComponent.ts (删除逻辑)

// This component make a request but it can't actually delete a hero. deleteRequest = new EventEmitter<Hero>(); delete() { this.deleteRequest.emit(this.hero); }

The component defines a deleteRequest property that returns an EventEmitter. When the user clicks delete, the component invokes the delete() method, telling the EventEmitter to emit a Hero object.

组件定义了deleteRequest属性,它是EventEmitter实例。 当用户点击删除时,组件会调用delete()方法,让EventEmitter发出一个Hero对象。

Now imagine a hosting parent component that binds to the HeroDetailComponent's deleteRequest event.

现在,假设有个宿主的父组件,它绑定了HeroDetailComponentdeleteRequest事件。

<hero-detail (deleteRequest)="deleteHero($event)" [hero]="currentHero"></hero-detail>

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, but 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.

删除这个英雄会更新模型,还可能触发其它修改,包括向远端服务器的查询和保存。 这些变更通过系统进行扩散,并最终显示到当前以及其它视图中。

Two-way binding

双向数据绑定

We often want to both display a data property and update that property when the user makes changes.

我们经常需要显示数据属性,并在用户作出更改时更新该属性。

On the element side that takes a combination of setting a specific element property and listening for an element change event.

在元素层面上,既要设置元素属性,又要监听元素事件变化。

Angular offers a special two-way data binding syntax for this purpose, [(x)]. The [(x)] syntax combines the brackets of property binding, [x], with the parentheses of event binding, (x).

Angular 为此提供一种特殊的双向数据绑定语法:[(x)][(x)]语法结合了属性绑定的方括号[x]事件绑定的圆括号(x)

[( )] = banana in a box
[( )] = 盒子里的香蕉

Visualize a banana in a box to remember that the parentheses go inside the brackets.

想象盒子里的香蕉来记住方括号套圆括号。

The [(x)] syntax is easy to demonstrate when the element has a settable property called x and a corresponding event named xChange. Here's a SizerComponent that fits the pattern. It has a size value property and a companion sizeChange event:

当一个元素拥有可以设置的属性x和对应的事件xChange时,解释[(x)]语法就容易多了。 下面的SizerComponent符合这个模式。它有size属性和伴随的sizeChange事件:

app/sizer.component.ts

import { Component, EventEmitter, Input, Output } from '@angular/core'; @Component({ selector: 'my-sizer', template: ` <div> <button (click)="dec()" title="smaller">-</button> <button (click)="inc()" title="bigger">+</button> <label [style.font-size.px]="size">FontSize: {{size}}px</label> </div>` }) export class SizerComponent { @Input() size: number | string; @Output() sizeChange = new EventEmitter<number>(); dec() { this.resize(-1); } inc() { this.resize(+1); } resize(delta: number) { this.size = Math.min(40, Math.max(8, +this.size + delta)); this.sizeChange.emit(this.size); } }

The initial size is an input value from a property binding. Clicking the buttons increases or decreases the size, within min/max values constraints, and then raises (emits) the sizeChange event with the adjusted size.

size的初始值是一个输入值,来自属性绑定。(译注:注意size前面的@Input) 点击按钮,在最小/最大值范围限制内增加或者减少size。 然后用调整后的size触发sizeChange事件。

Here's an example in which the AppComponent.fontSizePx is two-way bound to the SizerComponent:

下面的例子中,AppComponent.fontSize被双向绑定到SizerComponent

<my-sizer [(size)]="fontSizePx"></my-sizer> <div [style.font-size.px]="fontSizePx">Resizable Text</div>

The AppComponent.fontSizePx establishes the initial SizerComponent.size value. Clicking the buttons updates the AppComponent.fontSizePx via the two-way binding. The revised AppComponent.fontSizePx value flows through to the style binding, making the displayed text bigger or smaller. Try it in the .

SizerComponent.size初始值是AppComponent.fontSizePx。 点击按钮时,通过双向绑定更新AppComponent.fontSizePx。 被修改的AppComponent.fontSizePx通过样式绑定,改变文本的显示大小。 试一下在线例子

The two-way binding syntax is really just syntactic sugar for a property binding and an event binding. Angular desugars the SizerComponent binding into this:

双向绑定语法实际上是属性绑定和事件绑定的语法糖。 Angular将SizerComponent的绑定分解成这样:

<my-sizer [size]="fontSizePx" (sizeChange)="fontSizePx=$event"></my-sizer>

The $event variable contains the payload of the SizerComponent.sizeChange event. Angular assigns the $event value to the AppComponent.fontSizePx when the user clicks the buttons.

$event变量包含了SizerComponent.sizeChange事件的荷载。 当用户点击按钮时,Angular 将$event赋值给AppComponent.fontSizePx

Clearly the two-way binding syntax is a great convenience compared to separate property and event bindings.

很清楚,比起单独绑定属性和事件,双向数据绑定语法显得非常方便。

We'd like to use two-way binding with HTML form elements like <input> and <select>. Sadly, no native HTML element follows the x value and xChange event pattern.

我们希望能在像<input><select>这样的 HTML 元素上使用双向数据绑定。 可惜,原生 HTML 元素不遵循x值和xChange事件的模式。

Fortunately, the Angular NgModel directive is a bridge that enables two-way binding to form elements.

幸运的是,Angular 以 NgModel 指令为桥梁,允许在表单元素上使用双向数据绑定。

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.

当开发数据输入表单时,我们经常希望能显示数据属性,并在用户做出变更时更新该属性。

Two-way data binding with the NgModel directive makes that easy. Here's an example:

使用NgModel指令进行双向数据绑定让它变得更加容易。请看下例:

<input [(ngModel)]="currentHero.firstName">
FormsModule is Required to use ngModel
要使用 ngModel,必须导入 FormsModule

Before we can use the ngModel directive in a two-way data binding, we must import the FormsModule and add it to the Angular module's imports list. Learn more about the FormsModule and ngModel in the Forms chapter.

在使用ngModel做双向数据绑定之前,得先导入FormsModule, 把它加入 Angular 模块的imports列表。 学习关于FormsModulengModel的更多知识,参见表单

Here's how to import the FormsModule to make [(ngModel)] available.

下面展示了如何导入FormsModule,让[(ngModel)]变得可用:

app.module.ts (FormsModule import)

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }

Inside [(ngModel)]

[(ngModel)]内幕

Looking back at the firstName binding, it's important to note that we could have achieved the same result with separate bindings to the <input> element's value property and input event.

回顾一下firstName的绑定,值得注意的是,可以通过分别绑定<input>元素的value属性和`input事件来实现同样的效果。

<input [value]="currentHero.firstName" (input)="currentHero.firstName=$event.target.value" >

That’s cumbersome. Who can remember which element property to set and which element event emits user changes? How do we extract the currently displayed text from the input box so we can update the data property? Who wants to look that up each time?

这样很笨拙。谁能记住哪个元素属性用于设置,哪个用于发出用户更改? 如何从输入框中提取出当前显示的文本,以便更新数据属性? 谁想每次都去查一遍?

That ngModel directive hides these onerous details behind its own ngModel input and ngModelChange output properties.

ngModel指令通过它自己的ngModel输入属性和ngModelChange输出属性隐藏了这些繁琐的细节。

<input [ngModel]="currentHero.firstName" (ngModelChange)="currentHero.firstName=$event">

The ngModel data property sets the element's value property and the ngModelChange event property listens for changes to the element's value.

ngModel数据属性设置元素的 value 属性,ngModelChange事件属性监听元素 value 的变化。

The details are specific to each kind of element and therefore the NgModel directive only works for specific form elements, such as the input text box, that are supported by a ControlValueAccessor.

每种元素的特点各不相同,所以NgModel指令只能在一些特定表单元素上使用,例如输入文本框,因为它们支持 ControlValueAccessor

We can't apply [(ngModel)] to a custom component until we write a suitable value accessor, a technique that is beyond the scope of this chapter. That's something we might want to do for an Angular component or a WebComponent whose API we can't control.

除非写一个合适的值访问器,否则不能把[(ngModel)]用在自定义组件上。 但值访问器技术超出了本章的范围。 对于不能控制其 API 的 Angular 组件或者 Web 组件,可能需要为其添加 value accessor

It's completely unnecessary for an Angular component that we do control ... because we can name the value and event properties to suit Angular's basic two-way binding syntax and skip NgModel altogether.

但是对于我们能控制的 Angular 组件来说,这么做就完全没有必要了。 因为可以指定值和事件属性名字来进行基本的 Angular 双向绑定语法,完全不用NgModel

Separate ngModel bindings is an improvement over binding to the element's native properties. 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 [(ngModel)] syntax:

我们不应该提及数据属性两次。Angular 应该能捕捉组件的数据属性,并用一条声明来设置它——依靠[(ngModel)],可以这么做:

<input [(ngModel)]="currentHero.firstName">

Is [(ngModel)] all we need? Is there ever a reason to fall back to its expanded form?

[(ngModel)]就是我们所需的一切吗?有没有什么理由需要回退到它的展开形式?

The [(ngModel)] syntax can only set a data-bound property. If we need to do something more or something different, we need to write the expanded form ourselves.

[(ngModel)]语法只能设置一个数据绑定属性。 如果需要做更多或不同的事情,就得自己用它的展开形式。

Let's try something silly like forcing the input value to uppercase:

来做点淘气的事吧,比如强制让输入值变成大写形式:

<input [ngModel]="currentHero.firstName" (ngModelChange)="setUpperCaseFirstName($event)">

Here are all variations in action, including the uppercase version:

下面是实际操作中的所有变体形式,包括这个大写版本:

NgModel variations

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. Quite often we can achieve the same results with the more capable and expressive Angular binding system. Why create a directive to handle a click when we can write a simple binding such as this?

在新版的 Angular 中不需要那么多指令。 使用更强大、更富有表现力的 Angular 绑定系统,其实可以达到同样的效果。 如果能用简单的绑定达到目的,为什么还要创建指令来处理点击事件呢?

<button (click)="onSave()">Save</button>

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.

下面来看一下那些最常用的内置指令。

NgClass

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 is a good way to add or remove a single class.

CSS 类绑定 是添加或删除单个类的最佳途径。

<!-- toggle the "special" class on/off with a property --> <div [class.special]="isSpecial">The class binding is special</div>

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 object. 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,这个类就会被加上,否则就会被移除。

Consider a component method such as setClasses that manages the state of three CSS classes:

下面的组件方法setClasses管理了三个 CSS 类的状态:

setClasses() { let classes = { saveable: this.canSave, // true modified: !this.isUnchanged, // false special: this.isSpecial, // true }; return classes; }

Now we can add an NgClass property binding that calls setClasses and sets the element's classes accordingly:

现在,可以添加NgClass属性绑定,它会调用setClasses,并相应地设置元素的类:

<div [ngClass]="setClasses()">This div is saveable and special</div>

NgStyle

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 is an easy way to set a single style value.

样式绑定是设置单一样式值的简单方式。

<div [style.font-size]="isSpecial ? 'x-large' : 'smaller'" > This div is x-large. </div>

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 object. Each key of the object is a style name; its value is whatever is appropriate for that style.

NgStyle需要绑定到一个 key:value 控制对象。 对象的每个 key 是样式名,它的 value 是能用于这个样式的任何值。

Consider a component method such as setStyles that returns an object defining three styles:

下面的组件方法setStyles,返回一个定义了三种样式的对象:

setStyles() { let styles = { // CSS property names 'font-style': this.canSave ? 'italic' : 'normal', // italic 'font-weight': !this.isUnchanged ? 'bold' : 'normal', // normal 'font-size': this.isSpecial ? '24px' : '8px', // 24px }; return styles; }

Now we just add an NgStyle property binding that calls setStyles and sets the element's styles accordingly:

现在添加NgStyle属性绑定,让它调用setStyles,并相应地设置元素的样式:

<div [ngStyle]="setStyles()"> This div is italic, normal weight, and extra large (24px). </div>

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 上。

<div *ngIf="currentHero">Hello, {{currentHero.firstName}}</div>

Don't forget the asterisk (*) in front of ngIf. For more information, see * and <template>.

别忘了ngIf前面的星号(*)。 更多信息,见 * 与 <template>

Binding to a falsey expression removes the element subtree from the DOM.

绑定到假值表达式将从 DOM 中移除元素子树。

<!-- because of the ngIf guard `nullHero.firstName` never has a chance to fail --> <div *ngIf="nullHero">Hello, {{nullHero.firstName}}</div> <!-- Hero Detail is not in the DOM because isActive is false--> <hero-detail *ngIf="isActive"></hero-detail>

Visibility and NgIf are not the same

可见性和NgIf不是一回事

We can show and hide an element subtree (the element and its children) with a class or style binding:

我们可以通过类绑定样式绑定来显示和隐藏元素子树(元素及其子元素)。

<!-- isSpecial is true --> <div [class.hidden]="!isSpecial">Show with class</div> <div [class.hidden]="isSpecial">Hide with class</div> <!-- HeroDetail is in the DOM but hidden --> <hero-detail [class.hidden]="isSpecial"></hero-detail> <div [style.display]="isSpecial ? 'block' : 'none'">Show with style</div> <div [style.display]="isSpecial ? 'none' : 'block'">Hide with style</div>

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.

NgIffalse时,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可能是更安全的选择。但要记住:永远得先测量,再下结论。

NgSwitch

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:

下面是例子:

<span [ngSwitch]="toeChoice"> <span *ngSwitchCase="'Eenie'">Eenie</span> <span *ngSwitchCase="'Meanie'">Meanie</span> <span *ngSwitchCase="'Miney'">Miney</span> <span *ngSwitchCase="'Moe'">Moe</span> <span *ngSwitchDefault>other</span> </span>

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

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 中,其它的则会被移除。

Three collaborating directives are at work here:

这里有三个相互合作的指令:

  1. ngSwitch: bound to an expression that returns the switch value

    ngSwitch:绑定到返回开关值的表达式

  2. ngSwitchCase: bound to an expression returning a match value

    ngSwitchCase:绑定到返回匹配值的表达式

  3. ngSwitchDefault: a marker attribute on the default element

    ngSwitchDefault:用于标记出默认元素的 attribute

Do not put the asterisk (*) in front of ngSwitch. Use the property binding instead.

不要ngSwitch的前面加星号 (*),而应该用属性绑定。

Do put the asterisk (*) in front of ngSwitchCase and ngSwitchDefault. For more information, see * and <template>.

把星号 (*) 放在ngSwitchCasengSwitchDefault的前面。 要了解更多信息,见 * 与 <template>

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>上:

<div *ngFor="let hero of heroes">{{hero.fullName}}</div>

We can also apply an NgFor to a component element, as in this example:

也可以把NgFor应用在一个组件元素上,就下例这样:

<hero-detail *ngFor="let hero of heroes" [hero]="hero"></hero-detail>

Don't forget the asterisk (*) in front of ngFor. For more information, see * and <template>.

不要忘了ngFor前面的星号 (*)。 更多信息,见 * 与 <template>

The text assigned to *ngFor is the instruction that guides the repeater process.

赋值给*ngFor的文本是用于指导重复器如何工作的指令。

NgFor microsyntax

NgFor 微语法

The string assigned to *ngFor is not a template expression. It’s a microsyntax — a little language of its own that Angular interprets. In this example, the string "let hero of heroes" means:

赋值给*ngFor的字符串不是模板表达式。 它是一个微语法 —— 由 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 把这个指令翻译成一组元素和绑定。

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的模板输入变量。

A template input variable is not the same as a template reference variable!

模板输入变量和模板引用变量不是一回事!

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所做的那样。

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" 这样的条目。

<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.fullName}}</div>

Learn about other special index-like values such as last, even, and odd in the NgFor API reference.

要学习更多的类似 index 的值,例如lastevenodd,请参阅 NgFor API 参考

NgForTrackBy

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的对象其实是同一个英雄。 下面就是这样一个函数:

trackByHeroes(index: number, hero: Hero) { return hero.id; }

Now set the NgForTrackBy directive to that tracking function.

现在,把NgForTrackBy指令设置为那个追踪函数。

<div *ngFor="let hero of heroes; trackBy:trackByHeroes">({{hero.id}}) {{hero.fullName}}</div>

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效果的插图。

NgForTrackBy

* 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.

当审视NgForNgIfNgSwitch这些内置指令时,我们使用了一种古怪的语法:出现在指令名称前面的星号 (*)。

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 布局的指令更易于读写。 NgForNgIfNgSwitch都会添加或移除元素子树,这些元素子树被包裹在<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>标签中的。

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的一些代码:

<hero-detail *ngIf="currentHero" [hero]="currentHero"></hero-detail>

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指令。

<hero-detail template="ngIf:currentHero" [hero]="currentHero"></hero-detail>

The next (and final) step unfolds the HTML into a <template> tag and [ngIf] property binding:

下一步,也是最后一步,是把 HTML 包裹进<template>标签和[ngIf]属性绑定中:

<template [ngIf]="currentHero"> <hero-detail [hero]="currentHero"></hero-detail> </template>

Notice that the [hero]="currentHero" binding remains on the child <hero-detail> element inside the template.

注意,[hero]="currengHero"绑定留在了模板中的子元素<hero-detail>上。

Remember the brackets!
别忘了方括号!

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

Expanding *ngSwitch

展开*ngSwitch

A similar transformation applies to *ngSwitch. We can unfold the syntax ourselves. Here's an example, first with *ngSwitchCase and *ngSwitchDefault and then again with <template> tags:

类似的转换也适用于*ngSwitch。我们可以自己解开这个语法糖。 下例中,首先是*ngSwitchCase*ngSwitchDefault,然后再解出<template>标签:

<span [ngSwitch]="toeChoice"> <!-- with *NgSwitch --> <span *ngSwitchCase="'Eenie'">Eenie</span> <span *ngSwitchCase="'Meanie'">Meanie</span> <span *ngSwitchCase="'Miney'">Miney</span> <span *ngSwitchCase="'Moe'">Moe</span> <span *ngSwitchDefault>other</span> <!-- with <template> --> <template [ngSwitchCase]="'Eenie'"><span>Eenie</span></template> <template [ngSwitchCase]="'Meanie'"><span>Meanie</span></template> <template [ngSwitchCase]="'Miney'"><span>Miney</span></template> <template [ngSwitchCase]="'Moe'"><span>Moe</span></template> <template ngSwitchDefault><span>other</span></template> </span>

The *ngSwitchCase 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 ngSwitchCase 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:

上面这种情况下,它管理两组NgSwitchCaseNgSwitchDefault指令,一次是 (*) 前缀的版本,一次是展开模板后的版本。 我们也期待它显示所选模板的值两次。这正是在这个例子中看到的:

NgSwitch

Expanding *ngFor

展开*ngFor

The *ngFor undergoes a similar transformation. We begin with an *ngFor example:

*ngFor也经历类似的转换。从一个*ngFor的例子开始:

<hero-detail *ngFor="let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>

Here's the same example after transporting the ngFor to the template directive:

这里是在把ngFor传进template指令后的同一个例子:

<hero-detail template="ngFor let hero of heroes; trackBy:trackByHeroes" [hero]="hero"></hero-detail>

And here it is expanded further into a <template> tag wrapping the original <hero-detail> element:

下面,它被进一步扩展成了包裹着原始<hero-detail>元素的<template>标签:

<template ngFor let-hero [ngForOf]="heroes" [ngForTrackBy]="trackByHeroes"> <hero-detail [hero]="hero"></hero-detail> </template>

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 本身要简单多了。

Template reference variables

模板引用变量

A template reference variable is a reference to a DOM element or directive within a template.

模板引用变量是模板中对 DOM 元素或指令的引用。

It can be used with native DOM elements but also with Angular components — in fact, it will work with any custom web component.

它能在原生 DOM 元素中使用,也能用于 Angular 组件 —— 实际上,它可以和任何自定义 Web 组件协同工作。

Referencing a template reference variable

引用模板引用变量

We can refer to a template reference variable anywhere in the current template.

可以在同一元素、兄弟元素或任何子元素中引用模板引用变量。

Do not define the same variable name more than once in the same template. The runtime value will be unpredictable.

不要在同一个模版中多次定义相同变量名,否则运行时的值将会不可预测。

Here are two other examples of creating and consuming a Template reference variable:

这里是关于创建和使用模板引用变量的另外两个例子:

<!-- phone refers to the input element; pass its `value` to an event handler --> <input #phone placeholder="phone number"> <button (click)="callPhone(phone.value)">Call</button> <!-- fax refers to the input element; pass its `value` to an event handler --> <input ref-fax placeholder="fax number"> <button (click)="callFax(fax.value)">Fax</button>

The hash (#) prefix to "phone" means that we're defining a phone variable.

"phone" 的井号 (#) 前缀表示定义了一个phone变量。

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变量。

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方法。

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 chapter. The following is a simplified example — and it's not simple at all.

正如在表单一章中所见过的,表单的 HTML 可以做得相当复杂。 下面是简化过的范例 —— 虽然仍算不上多简单。

<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm"> <div class="form-group"> <label for="name">Name</label> <input class="form-control" name="name" required [(ngModel)]="currentHero.firstName"> </div> <button type="submit" [disabled]="!theForm.form.valid">Submit</button> </form>

A template reference variable, theForm, appears three times in this example, separated by a large amount of HTML.

模板引用变量theForm在这个例子中出现了三次,中间隔着一大段 HTML。

<form (ngSubmit)="onSubmit(theForm)" #theForm="ngForm"> <button type="submit" [disabled]="!theForm.form.valid">Submit</button> </form>

What is the value of theForm?

theForm变量的值是什么?

It would be the 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。 实际上它是个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方法可能会出发事件,被父组件监听,参见下面的输入和输出属性父组件监听子组件的事件。)

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.

本节则专注于绑定到的目标,它位于绑定声明中的左侧。 这些指令的属性必须被声明成输入输出

Remember: All components are directives.

记住:所有组件皆为指令

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.

访问目标指令中的成员则受到限制。 只能绑定到那些显式标记为输入输出的属性。

In the following example, iconUrl and onSave are members of a component that are referenced within quoted syntax to the right of the =.

在下面的例子中,iconUrlonSave是组件的成员,它们在=右侧引号语法中被引用了。

<img [src]="iconUrl"/> <button (click)="onSave()">Save</button>

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,它是绑定的目标

<hero-detail [hero]="currentHero" (deleteRequest)="deleteHero($event)"> </hero-detail>

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.heroHeroDetailComponent.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内部时,就会看到这些属性被装饰器标记成了输入和输出属性。

@Input() hero: Hero; @Output() deleteRequest = new EventEmitter<Hero>();

Alternatively, we can identify members in the inputs and outputs arrays of the directive metadata, as in this example:

另外,还可以在指令元数据的inputsoutputs数组中标记出这些成员。比如这个例子:

@Component({ inputs: ['hero'], outputs: ['deleteRequest'], })

We can specify an input/output property either with a decorator or in a metadata array. Don't do both!

既可以通过装饰器,也可以通过元数据数组来指定输入/输出属性。但别同时用!

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.

输入输出这两个词是从目标指令的角度来说的。

Inputs and outputs

HeroDetailComponent.hero is an input property from the perspective of HeroDetailComponent because data flows into that property from a template binding expression.

HeroDetailComponent角度来看,HeroDetailComponent.hero是个输入属性, 因为数据流从模板绑定表达式流那个属性。

HeroDetailComponent.deleteRequest is an output property from the perspective of HeroDetailComponent because events stream out of that property and toward the handler in a template binding statement.

HeroDetailComponent角度来看,HeroDetailComponent.deleteRequest是个输出属性, 因为事件从那个属性流,流向模板绑定语句中的处理器。

Aliasing input/output properties

给输入/输出属性起别名

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. 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 指令时的常见情况。 指令的使用者期望绑定到指令名。例如,在<div>上用myClick选择器应用指令时, 希望绑定的事件属性也叫myClick

<div (myClick)="clickMessage=$event">click with myClick</div>

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装饰器,就可以为属性指定别名,就像这样:

@Output('myClick') clicks = new EventEmitter<string>(); // @Output(alias) propertyName = ...

We can also alias property names in the inputs and outputs arrays. We write a colon-delimited (:) string with the directive property name on the left and the public alias on the right:

也可在inputsoutputs数组中为属性指定别名。 可以写一个冒号 (:) 分隔的字符串,左侧是指令中的属性名,右侧则是公开的别名。

@Directive({ outputs: ['clicks:myClick'] // propertyName:alias })

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 语法的子集,并补充了几个用于特定场景的特殊操作符。 下面介绍其中的两个:管道安全导航操作符

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 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 管道对像这样的小型转换来说是个明智的选择。 管道是一个简单的函数,它接受一个输入值,并返回转换结果。 它们很容易用于模板表达式中,只要使用管道操作符 (|) 就行了。

<div>Title through uppercase pipe: {{title | uppercase}}</div>

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:

还可以通过多个管道串联表达式:

<!-- Pipe chaining: convert title to uppercase, then to lowercase --> <div> Title through a pipe chain: {{title | uppercase | lowercase}} </div>

And we can also apply parameters to a pipe:

还能对它们使用参数:

<!-- pipe with configuration argument => "February 25, 1970" --> <div>Birthdate: {{currentHero?.birthdate | date:'longDate'}}</div>

The json pipe is particularly helpful for debugging our bindings:

json管道对调试绑定特别有用:

<div>{{currentHero | json}}</div>

The generated output would look something like this

它生成的输出是类似于这样的:

{ "firstName": "Hercules", "lastName": "Son of Zeus", "birthdate": "1970-02-25T08:00:00.000Z", "url": "http://www.imdb.com/title/tt0065832/", "rate": 325, "id": 1 }

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为空时,保护视图渲染器,让它免于失败。

The current hero's name is {{currentHero?.firstName}}

Let’s elaborate on the problem and this particular solution.

我们来详细阐述一下这个问题和解决方案:

What happens when the following data bound title property is null?

如果下列数据绑定中title属性为空,会发生什么?

The title is {{title}}

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

The null hero's name is {{nullHero.firstName}}

JavaScript throws a null reference error, and so does Angular:

JavaScript 抛出了空引用错误,Angular 也是如此:

TypeError: Cannot read property 'firstName' of null in [null].

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代码来解决这个问题。

<!--No hero, div not displayed, no error --> <div *ngIf="nullHero">The null hero's name is {{nullHero.firstName}}</div>

Or we could try to chain parts of the property path with &&, knowing that the expression bails out when it encounters the first null.

或者可以尝试通过&&来把属性路径的各部分串起来,让它在遇到第一个空值的时候,就返回空。

The null hero's name is {{nullHero && nullHero.firstName}}

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)中对空值提供保护。

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 安全导航操作符 (?.) 是在属性路径中保护空值的更加流畅、便利的方式。 表达式会在它遇到第一个空值的时候跳出。 显示是空的,但应用正常工作,而没有发生错误。

<!-- No hero, no problem! --> The null hero's name is {{nullHero?.firstName}}

It works perfectly with long property paths such as a?.b?.c?.d.

在像a?.b?.c?.d这样的长属性路径中,它工作得很完美。

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.

我们完成了模板语法的概述。现在,该把如何写组件和指令的知识投入到实际工作当中了。

下一步

Angular 速查表