Zhicheng Wang
parent
2821384bdf
commit
cb756a5a05
|
|
@ -574,7 +574,7 @@ figure.image-display
|
|||
To illustrate, we've written a simplified version of the `HighlightDirective` from
|
||||
the [Attribute Directives](../guide/attribute-directives.html) chapter.
|
||||
|
||||
为了说明这一点，我们在[Attribute指令](../guide/attribute-directives.html)`HighlightDirective`的基础上，编写了一个简化版本。
|
||||
为了说明这一点，我们在[属性型指令](../guide/attribute-directives.html)`HighlightDirective`的基础上，编写了一个简化版本。
|
||||
|
||||
+makeExample('cb-dependency-injection/ts/app/highlight.directive.ts','','app/highlight.directive.ts')
|
||||
:marked
|
||||
|
|
@ -592,7 +592,7 @@ figure.image-display
|
|||
The sample code applies the directive's `myHighlight` attribute to two `<div>` tags,
|
||||
first without a value (yielding the default color) and then with an assigned color value.
|
||||
|
||||
下面的代码把指令的`myHighlight` Attribute填加到两个`<div>`标签里，一个没有赋值，一个赋值了颜色。
|
||||
下面的代码把指令的`myHighlight`属性(Attribute)填加到两个`<div>`标签里，一个没有赋值，一个赋值了颜色。
|
||||
|
||||
+makeExample('cb-dependency-injection/ts/app/app.component.html','highlight','app/app.component.html (highlight)')(format='.')
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ include _util-fns
|
|||
// #docregion a-2
|
||||
:marked
|
||||
## Attribute Directive
|
||||
## Attribute型指令（Attribute Directive）
|
||||
## 属性型指令（Attribute Directive）
|
||||
.l-sub-section
|
||||
:marked
|
||||
A category of [Directive](#directive) that can listen to and modify the behavior of
|
||||
|
|
@ -50,7 +50,7 @@ include _util-fns
|
|||
The `ngClass` directive for adding and removing CSS class names is a good example of
|
||||
an Attribute Directive.
|
||||
|
||||
`ngClass`指令就是典型的Attribute型指令。它可以添加或移除CSS类名。
|
||||
`ngClass`指令就是典型的属性型指令。它可以添加或移除CSS类名。
|
||||
// #enddocregion a-2
|
||||
|
||||
// #docregion b-c
|
||||
|
|
@ -427,7 +427,7 @@ include _util-fns
|
|||
it creates the matching directive class instance
|
||||
and gives that instance control over that portion of the browser DOM.
|
||||
|
||||
指令几乎都是关联到HTML元素或Attribute的。我们通常把这些关联的HTML元素或者Attribute当做指令本身。
|
||||
指令几乎都是关联到HTML元素或属性(Attribute)的。我们通常把这些关联的HTML元素或者属性(Attribute)当做指令本身。
|
||||
当Angular在HTML模板中遇到一个指令的时候，它就找出一个与该指令匹配的类，创建此类的实例，然后把浏览器中这部分DOM的控制权交给该实例。
|
||||
|
||||
Developers can invent custom HTML markup (e.g., `<my-directive>`) to
|
||||
|
|
@ -451,7 +451,7 @@ include _util-fns
|
|||
1. [Attribute Directives](#attribute-directive) that can listen to and modify the behavior of
|
||||
other HTML elements, attributes, properties, and components. They are usually represented
|
||||
as HTML attributes, hence the name.
|
||||
1. [Attribute指令](#attribute-directive)：可以监控和修改其它HTML元素、Attribute、属性和组件之类的行为。它们一般表示为HTML元素Attibute，故名。
|
||||
1. [属性型指令](#attribute-directive)：可以监控和修改其它HTML元素、HTML属性(Attribute)、DOM属性(Property)以及组件等的行为。它们一般表示为HTML元素的属性(Attibute)，故名。
|
||||
|
||||
1. [Structural Directives](#structural-directive), a directive responsible for
|
||||
shaping or re-shaping HTML layout, typically by adding, removing, or manipulating
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
},
|
||||
|
||||
"attribute-directives": {
|
||||
"title": "Attribute型指令",
|
||||
"intro": "Attribute型指令把行为添加到现有元素上。"
|
||||
"title": "属性型指令",
|
||||
"intro": "属性型指令把行为添加到现有元素上。"
|
||||
},
|
||||
|
||||
"component-styles": {
|
||||
|
|
@ -85,8 +85,8 @@
|
|||
},
|
||||
|
||||
"lifecycle-hooks": {
|
||||
"title": "生命周期挂钩点",
|
||||
"intro": "Angular调用指令和组件的生命周期挂钩函数，包括它的创建、变更和销毁时。"
|
||||
"title": "生命周期钩子",
|
||||
"intro": "Angular调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。"
|
||||
},
|
||||
|
||||
"npm-packages": {
|
||||
|
|
|
|||
|
|
@ -617,7 +617,7 @@ figure
|
|||
They tend to appear within an element tag like attributes,
|
||||
sometimes by name but more often as the target of an assignment or a binding.
|
||||
|
||||
它们往往像Attribute一样出现在元素标签中，偶尔会以名字的形式出现（参见[一次性绑定](./template-syntax.html#one-time-initialization)），但多数时候还是作为赋值目标或绑定目标。
|
||||
它们往往像属性一样出现在元素标签中，偶尔会以名字的形式出现（参见[一次性绑定](./template-syntax.html#one-time-initialization)），但多数时候还是作为赋值目标或绑定目标。
|
||||
|
||||
**Structural** directives alter layout by adding, removing, and replacing elements in DOM.
|
||||
|
||||
|
|
@ -640,11 +640,11 @@ figure
|
|||
**Attribute** directives alter the appearance or behavior of an existing element.
|
||||
In templates they look like regular HTML attributes, hence the name.
|
||||
|
||||
**Attribute型指令** 修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性，故名。
|
||||
**属性型指令** 修改一个现有元素的外观或行为。在模板中，它们看起来就像是标准的HTML属性，故名。
|
||||
|
||||
The `ngModel` directive, which implements two-way data binding, is an example of an attribute directive.
|
||||
|
||||
`ngModel`指令就是Attribute型指令的一个例子，它实现了双向数据绑定。
|
||||
`ngModel`指令就是属性型指令的一个例子，它实现了双向数据绑定。
|
||||
|
||||
+makeExample('architecture/ts/app/hero-detail.component.html', 'ngModel')(format=".")
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -4,16 +4,16 @@ block includes
|
|||
:marked
|
||||
An **Attribute** directive changes the appearance or behavior of a DOM element.
|
||||
|
||||
**Attribute**型指令用于改变一个DOM元素的外观或行为。
|
||||
**属性**型指令用于改变一个DOM元素的外观或行为。
|
||||
|
||||
:marked
|
||||
In this chapter we will
|
||||
|
||||
本章中我们将：
|
||||
* [write an attribute directive to change the background color](#write-directive)
|
||||
* [写一个用来改变背景色的Attribute型指令](#write-directive)
|
||||
* [写一个用来改变背景色的属性型指令](#write-directive)
|
||||
* [apply the attribute directive to an element in a template](#apply-directive)
|
||||
* [把这个Attribute型指令应用到模板中的元素](#apply-directive)
|
||||
* [把这个属性型指令应用到模板中的元素](#apply-directive)
|
||||
* [respond to user-initiated events](#respond-to-user)
|
||||
* [响应用户引发的事件](#respond-to-user)
|
||||
* [pass values into the directive using data binding](#bindings)
|
||||
|
|
@ -33,7 +33,7 @@ p Try the #[+liveExampleLink2()].
|
|||
1. Structural directives
|
||||
1. 结构型指令
|
||||
1. Attribute directives
|
||||
1. Attribute型指令
|
||||
1. 属性型指令
|
||||
|
||||
A *Component* is really a directive with a template.
|
||||
It's the most common of the three directives and we tend to write lots of them as we build applications.
|
||||
|
|
@ -51,13 +51,13 @@ p Try the #[+liveExampleLink2()].
|
|||
The built-in [NgStyle](template-syntax.html#ngStyle) directive, for example,
|
||||
can change several element styles at the same time.
|
||||
|
||||
*Attribute型*指令改变一个元素的外观或行为。
|
||||
*属性型*指令改变一个元素的外观或行为。
|
||||
比如，内建的[NgStyle](template-syntax.html#ngStyle)指令可以同时修改元素的多种样式。
|
||||
|
||||
We are going to write our own attribute directive to set an element's background color
|
||||
when the user hovers over that element.
|
||||
|
||||
我们准备写一个自己的Attribute型指令，当用户把鼠标悬浮在元素上时，它会设置元素的背景色。
|
||||
我们准备写一个自己的属性型指令，当用户把鼠标悬浮在元素上时，它会设置元素的背景色。
|
||||
.l-sub-section
|
||||
:marked
|
||||
We don't need *any* directive to simply set the background color.
|
||||
|
|
@ -81,13 +81,13 @@ p Try the #[+liveExampleLink2()].
|
|||
a#write-directive
|
||||
:marked
|
||||
## Build a simple attribute directive
|
||||
## 创建一个简单的Attribute型指令
|
||||
## 创建一个简单的属性型指令
|
||||
An attribute directive minimally requires building a controller class annotated with
|
||||
`@Directive`, which specifies the selector identifying
|
||||
the attribute associated with the directive.
|
||||
The controller class implements the desired directive behavior.
|
||||
|
||||
Attribute型指令至少需要一个带有`@Directive`装饰器的控制器类。该装饰器指定了一个选择器，用于指出与此指令相关的Attribute。
|
||||
属性型指令至少需要一个带有`@Directive`装饰器的控制器类。该装饰器指定了一个选择器，用于指出与此指令相关的属性。
|
||||
控制器类实现了指令需要具备的行为。
|
||||
|
||||
Let's build a small illustrative example together.
|
||||
|
|
@ -131,13 +131,13 @@ block highlight-directive-1
|
|||
The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
|
||||
is the attribute name in square brackets.
|
||||
|
||||
Attribute型指令的`@Directive`装饰器需要一个css选择器，以便从模板中识别出关联到我们这个指令的HTML。
|
||||
[css中的attribute选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是Attribute名称加方括号。
|
||||
属性型指令的`@Directive`装饰器需要一个css选择器，以便从模板中识别出关联到我们这个指令的HTML。
|
||||
[css中的attribute选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是属性名称加方括号。
|
||||
|
||||
Our directive's selector is `[myHighlight]`.
|
||||
Angular will locate all elements in the template that have an attribute named `myHighlight`.
|
||||
|
||||
我们这个指令的选择器是`[myHighlight]`，于是Angular就会在模板中找到带有`myHighlight`这个Attribute的元素。
|
||||
我们这个指令的选择器是`[myHighlight]`，于是Angular就会在模板中找到带有`myHighlight`这个属性的元素。
|
||||
.l-sub-section
|
||||
:marked
|
||||
### Why not call it "highlight"?
|
||||
|
|
@ -150,7 +150,7 @@ block highlight-directive-1
|
|||
that it cannot conflict with any standard HTML attribute, now or in the future.
|
||||
There is also less risk of colliding with a third-party directive name when we give ours a prefix.
|
||||
|
||||
不过，我们还是建议选择一个带前缀的选择器名称，以保证无论现在还是未来它都不会和任何标准HTML Attribute发生冲突。
|
||||
不过，我们还是建议选择一个带前缀的选择器名称，以保证无论现在还是未来它都不会和任何标准HTML属性发生冲突。
|
||||
当我们使用自己的前缀时，也会减少和第三方指令发生命名冲突的风险。
|
||||
|
||||
We do **not** prefix our `highlight` directive name with **`ng`**.
|
||||
|
|
@ -188,15 +188,15 @@ p
|
|||
a#apply-directive
|
||||
:marked
|
||||
## Apply the attribute directive
|
||||
## 应用Attribute型指令
|
||||
## 应用属性型指令
|
||||
The `AppComponent` in this sample is a test harness for our `HighlightDirective`.
|
||||
Let's give it a new template that
|
||||
applies the directive as an attribute to a paragraph (`p`) element.
|
||||
In Angular terms, the `<p>` element will be the attribute **host**.
|
||||
|
||||
这个例子中的`AppComponent`只是我们用来测试`HighlightDirective`的一个壳儿。
|
||||
我们来给它一个新的模板，把这个指令作为Attribute应用到一个段落(`p`)元素上。
|
||||
用Angular的话说，`<p>`元素就是这个Attribute型指令的**宿主**。
|
||||
我们来给它一个新的模板，把这个指令作为属性应用到一个段落(`p`)元素上。
|
||||
用Angular的话说，`<p>`元素就是这个属性型指令的**宿主**。
|
||||
p
|
||||
| We'll put the template in its own
|
||||
code #[+adjExPath('app.component.html')]
|
||||
|
|
@ -298,7 +298,7 @@ a#respond-to-user
|
|||
:marked
|
||||
The `host` property refers to the DOM element that hosts our attribute directive, the `<p>` in our case.
|
||||
|
||||
`host`属性引用的是我们这个Attribute指令的宿主元素，在这个例子中就是`<p>`。
|
||||
`host`属性引用的是我们这个属性型指令的宿主元素，在这个例子中就是`<p>`。
|
||||
|
||||
We could have attached event listeners by manipulating the host DOM element directly, but
|
||||
there are at least three problems with such an approach:
|
||||
|
|
@ -386,7 +386,7 @@ a#input
|
|||
The developer who uses this directive expects to bind to the attribute name, `myHighlight`.
|
||||
The directive property name is `highlightColor`. That's a disconnect.
|
||||
|
||||
使用我们这个指令的开发人员会期望绑定到Attribute名`myHighlight`上，
|
||||
使用我们这个指令的开发人员会期望绑定到属性名`myHighlight`上，
|
||||
而指令中的属性名是`highlightColor`。两者联系不起来。
|
||||
|
||||
We could resolve the discrepancy by renaming the property to `myHighlight` and define it as follows:
|
||||
|
|
@ -401,7 +401,7 @@ a#input
|
|||
passing `myHighlight` into the `@Input` #{_decorator}:
|
||||
|
||||
但我们可能在指令中不想要那样一个属性名，因为它不能很好的表示我们的意图。
|
||||
我们可以通过把`myHighlight`传给`@Input`#{_decoratorCn}来把这个Attribute名字作为`highlightColor`属性的别名。
|
||||
我们可以通过把`myHighlight`传给`@Input`#{_decoratorCn}来把这个属性名作为`highlightColor`属性的别名。
|
||||
+makeExample('attribute-directives/ts/app/highlight.directive.ts', 'color')
|
||||
:marked
|
||||
Now that we're getting the highlight color as an input, we modify the `onMouseEnter()` method to use
|
||||
|
|
@ -496,7 +496,7 @@ code-example(format="." ).
|
|||
:marked
|
||||
We do the same thing with an attribute directive.
|
||||
|
||||
在Attribute型指令中也可以这样做。
|
||||
在属性型指令中也可以这样做。
|
||||
+makeExample('attribute-directives/ts/app/app.component.html', 'defaultColor')(format=".")
|
||||
:marked
|
||||
Here we're binding the user's color choice to the `myHighlight` attribute as we did before.
|
||||
|
|
@ -519,13 +519,13 @@ figure.image-display
|
|||
|
||||
现在，我们知道了该如何：
|
||||
- [build a simple **attribute directive** to attach behavior to an HTML element](#write-directive),
|
||||
- [构建一个简单的**Attribute型指令**来为一个HTML元素添加行为](#write-directive)，
|
||||
- [构建一个简单的**属性型指令**来为一个HTML元素添加行为](#write-directive)，
|
||||
- [use that directive in a template](#apply-directive),
|
||||
- [在模板中使用那个指令](#apply-directive)，
|
||||
- [respond to **events** to change behavior based on an event](#respond-to-user),
|
||||
- [响应**事件**，以便基于事件改变行为](#respond-to-user)，
|
||||
- and [use **binding** to pass values to the attribute directive](#bindings).
|
||||
- 以及[使用**绑定**来把值传给Attribute型指令](#bindings)。
|
||||
- 以及[使用**绑定**来把值传给属性型指令](#bindings)。
|
||||
|
||||
The final source:
|
||||
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
"prerelease": [
|
||||
"local"
|
||||
],
|
||||
"build": "sha.48e03ae",
|
||||
"build": "sha.89c197a",
|
||||
"version": "2.0.0-local",
|
||||
"codeName": "snapshot",
|
||||
"isSnapshot": true,
|
||||
"full": "2.0.0-local+sha.48e03ae",
|
||||
"full": "2.0.0-local+sha.89c197a",
|
||||
"branch": "master",
|
||||
"commitSHA": "48e03ae748c0d68292380c4af2361faab5f6b497"
|
||||
"commitSHA": "89c197a385e2ff5aeb8c190ed20db1389f477b3b"
|
||||
},
|
||||
"sections": [
|
||||
{
|
||||
|
|
@ -119,6 +119,20 @@
|
|||
"{{employer?.companyName}}"
|
||||
],
|
||||
"description": "<p>安全导航运算符(<code>?.</code>)表示<code>employer</code>字段是可选的，如果它是<code>undefined</code>，表达式剩下的部分将被忽略</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<svg:rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>",
|
||||
"bold": [
|
||||
"svg:"
|
||||
],
|
||||
"description": "<p>SVG模板需要在它们的根节点上带一个<code>svg:</code>前缀，以消除模板中HTML元素和SVG元素的歧义。</p>\n"
|
||||
},
|
||||
{
|
||||
"syntax": "<svg>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\"/>\n</svg>",
|
||||
"bold": [
|
||||
"svg"
|
||||
],
|
||||
"description": "<p><code><svg></code>元素在无需前缀的情况下，也能被自动检测为SVG。</p>\n"
|
||||
}
|
||||
],
|
||||
"index": 1
|
||||
|
|
|
|||
|
|
@ -390,7 +390,7 @@ a#inspect-generated-css
|
|||
encapsulation enabled, we see that each DOM element has some extra attributes
|
||||
attached to it:
|
||||
|
||||
当我们查看启用了“仿真”模式的Angular应用时，我们看到每个DOM元素都被加上了一些额外的Attribute。
|
||||
当我们查看启用了“仿真”模式的Angular应用时，我们看到每个DOM元素都被加上了一些额外的属性。
|
||||
|
||||
code-example(format="").
|
||||
<hero-details _nghost-pmm-5>
|
||||
|
|
@ -403,11 +403,11 @@ code-example(format="").
|
|||
:marked
|
||||
We see two kinds of generated attributes:
|
||||
|
||||
我们看到了两种被生成的Attribute：
|
||||
我们看到了两种被生成的属性：
|
||||
* An element that would be a Shadow DOM host in native encapsulation has a
|
||||
generated `_nghost` attribute. This is typically the case for component host elements.
|
||||
|
||||
* 如果一个元素在原生包装方式下将成为Shadow DOM的宿主，那么它将被自动添加上一个`_nghost` Attribute。
|
||||
* 如果一个元素在原生包装方式下将成为Shadow DOM的宿主，那么它将被自动添加上一个`_nghost`属性。
|
||||
这是组件宿主元素的典型情况。
|
||||
|
||||
* An element within a component's view has a `_ngcontent` attribute
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ block http-providers
|
|||
For this reason, and this reason *only*, we hide it *above* the `AppComponent` in `main.ts`.
|
||||
|
||||
这种“偷梁换柱”的把戏是应用程序的根组件*不应该*察觉的。
|
||||
因为这*唯一的*理由，我们把它藏在`main.ts`里，在层次上高于`AppComponent`。
|
||||
正因为这*一个*理由，我们把它藏在`main.ts`里，在层次上高于`AppComponent`。
|
||||
|
||||
.l-main-section
|
||||
h1#http-client The Tour of Heroes #[i HTTP] Client Demo
|
||||
|
|
@ -177,12 +177,20 @@ h1#http-client 《英雄指南》#[i HTTP]客户端的演示
|
|||
Our first demo is a mini-version of the [tutorial](../tutorial)'s "Tour of Heroes" (ToH) application.
|
||||
This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server.
|
||||
We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`.
|
||||
|
||||
我们的第一个演示是《英雄指南(TOH)》教程的一个mini版。
|
||||
这个版本从服务器获取一些英雄，把它们显示在列表中，还允许我们添加新的英雄并将其保存到服务器。
|
||||
我们借助!{_Angular_Http}客户端，来通过`XMLHttpRequest (XHR)`与服务器通讯。
|
||||
|
||||
It works like this.
|
||||
|
||||
它跑起来是这样的：
|
||||
figure.image-display
|
||||
img(src='/resources/images/devguide/server-communication/http-toh.gif' alt="ToH mini app" width="250")
|
||||
:marked
|
||||
This demo has a single component, the `HeroListComponent`. Here's its template:
|
||||
|
||||
这个范例是一个单一组件`HeroListComponent`，其模板如下：
|
||||
+makeExample('server-communication/ts/app/toh/hero-list.component.html', null, 'app/toh/hero-list.component.html (template)')
|
||||
:marked
|
||||
It presents the list of heroes with an `ngFor`.
|
||||
|
|
|
|||
|
|
@ -2322,19 +2322,19 @@ a(href="#toc") 回到顶部
|
|||
:marked
|
||||
**Do** use attribute directives when you have presentation logic without a template.
|
||||
|
||||
**坚持**当你需要有无模板的展示逻辑时，使用Attribute指令。
|
||||
**坚持**当你需要有无模板的展示逻辑时，使用属性型指令。
|
||||
|
||||
.s-why
|
||||
:marked
|
||||
**Why?** Attributes directives don't have an associated template.
|
||||
|
||||
**为何？**Attribute指令没有配套的模板。
|
||||
**为何？**属性型指令没有配套的模板。
|
||||
|
||||
.s-why.s-why-last
|
||||
:marked
|
||||
**Why?** An element may have more than one attribute directive applied.
|
||||
|
||||
**为何？**一个元素可能使用多个Attribute指令。
|
||||
**为何？**一个元素可能使用多个属性型指令。
|
||||
|
||||
+makeExample('style-guide/ts/06-01/app/shared/highlight.directive.ts', 'example', 'app/shared/highlight.directive.ts')
|
||||
:marked
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ include ../_util-fns
|
|||
* [Property binding](#property-binding)
|
||||
* [属性绑定](#property-binding)
|
||||
* [Attribute, class, and style bindings](#other-bindings)
|
||||
* [元素属性、class和style绑定](#other-bindings)
|
||||
* [HTML属性、class和style绑定](#other-bindings)
|
||||
* [Event binding](#event-binding)
|
||||
* [事件绑定](#event-binding)
|
||||
* [Two-way data binding with `NgModel`](#ngModel)
|
||||
|
|
@ -87,7 +87,7 @@ include ../_util-fns
|
|||
|
||||
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词汇。它们看上去就是新元素和Attribute。我们将学习如何通过数据绑定来动态获取/设置DOM的值。
|
||||
我们可以通过组件和指令来扩展模板中的HTML词汇。它们看上去就是新元素和属性。我们将学习如何通过数据绑定来动态获取/设置DOM的值。
|
||||
|
||||
Let’s turn to the first form of data binding — interpolation — to see how much richer template HTML can be.
|
||||
|
||||
|
|
@ -108,7 +108,7 @@ include ../_util-fns
|
|||
:marked
|
||||
We use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
|
||||
|
||||
我们使用插值表达式来把计算所得的字符串插入成HTML元素标签内的文本或对标签的Attribute进行赋值。
|
||||
我们使用插值表达式来把计算所得的字符串插入成HTML元素标签内的文本或对标签的属性进行赋值。
|
||||
// #enddocregion interpolation-2
|
||||
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'title+image')(format=".")
|
||||
|
|
@ -146,7 +146,7 @@ include ../_util-fns
|
|||
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.
|
||||
|
||||
表面上看，我们在元素标签之间插入了结果或者对标签的Attribute进行了赋值。
|
||||
表面上看，我们在元素标签之间插入了结果或者对标签的属性进行了赋值。
|
||||
这样思考起来很方便，并且很少给我们带来错误。
|
||||
但严格来讲，这是不对的。插值表达式是一个特殊的语法，Angular把它转换成了一个[属性绑定](#property-binding)，我们后面将会解释这一点。
|
||||
|
||||
|
|
@ -518,6 +518,16 @@ table
|
|||
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-`).
|
||||
|
|
@ -582,7 +592,7 @@ table
|
|||
it to the current value of the component’s `isUnchanged` property.
|
||||
|
||||
我们首先会注意到这个怪异的括号注解。接下来，直觉告诉我们，我们正在绑定到这个按钮的`disabled` Attribute。
|
||||
并且把它设置为组件的`isUnchanged`属性Property的当前值。
|
||||
并且把它设置为组件的`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.
|
||||
|
|
@ -590,7 +600,7 @@ table
|
|||
|
||||
但我们的直觉是错的！以前的思维模型在误导我们。
|
||||
实际上，一旦我们开始数据绑定，我们就不再跟Attribute打交道了。我们并不是在设置Attribute，
|
||||
而是在设置DOM元素、组件和指令的属性。
|
||||
而是在设置DOM元素、组件和指令的Property。
|
||||
// #enddocregion binding-syntax-4
|
||||
|
||||
// #docregion binding-syntax-attribute-vs-property
|
||||
|
|
@ -695,7 +705,7 @@ table
|
|||
Attributes effectively disappear.
|
||||
|
||||
在Angular 2的世界中，Attribute唯一的作用是用来初始化元素和指令的状态。
|
||||
当进行数据绑定时，我们只是在与元素和指令的属性和事件打交道，而Attribute就完全靠边站了。
|
||||
当进行数据绑定时，我们只是在与元素和指令的Property和事件打交道，而Attribute就完全靠边站了。
|
||||
// #enddocregion binding-syntax-world-without-attributes
|
||||
// #docregion binding-syntax-targets
|
||||
:marked
|
||||
|
|
@ -712,7 +722,7 @@ table
|
|||
The following table summarizes:
|
||||
|
||||
**数据绑定的目标**是DOM中的某些东西。
|
||||
这个目标可能是（元素|组件|指令）的属性、（元素|组件|指令）的事件，或（极少数情况下）一个Attribute名。
|
||||
这个目标可能是（元素|组件|指令）的Property、（元素|组件|指令）的事件，或（极少数情况下）一个Attribute名。
|
||||
下面是的汇总表：
|
||||
// #enddocregion binding-syntax-targets
|
||||
|
||||
|
|
@ -732,14 +742,14 @@ table
|
|||
tr
|
||||
td
|
||||
p Property
|
||||
p 属性
|
||||
p Property
|
||||
td
|
||||
p Element property
|
||||
p 元素的属性
|
||||
p 元素的Property
|
||||
p Component property
|
||||
p 组件的属性
|
||||
p 组件的Property
|
||||
p Directive property
|
||||
p 指令的属性
|
||||
p 指令的Property
|
||||
td
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'property-binding-syntax-1')(format=".")
|
||||
tr
|
||||
|
|
@ -761,14 +771,14 @@ table
|
|||
p 双向
|
||||
td
|
||||
p Event and property
|
||||
p 事件与属性
|
||||
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 例外情况
|
||||
p Attribute例外情况
|
||||
td
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'attribute-binding-syntax-1')(format=".")
|
||||
tr
|
||||
|
|
@ -777,7 +787,7 @@ table
|
|||
p 类
|
||||
td
|
||||
p <code>class</code> property
|
||||
p <code>class</code>属性
|
||||
p <code>class</code> property
|
||||
td
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'class-binding-syntax-1')(format=".")
|
||||
tr
|
||||
|
|
@ -786,7 +796,7 @@ table
|
|||
p 样式
|
||||
td
|
||||
p <code>style</code> property
|
||||
p <code>style</code>属性
|
||||
p <code>style</code> property
|
||||
td
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'style-binding-syntax-1')(format=".")
|
||||
</div>
|
||||
|
|
@ -802,7 +812,7 @@ table
|
|||
.l-main-section
|
||||
:marked
|
||||
## Property binding
|
||||
## 属性绑定
|
||||
## 属性(Property)绑定
|
||||
We write a template **property binding** when we want to set a property of a view element to the value of
|
||||
a [template expression](#template-expressions).
|
||||
|
||||
|
|
@ -1090,7 +1100,7 @@ code-example(format="", language="html").
|
|||
It has the "colspan" *attribute*, but
|
||||
interpolation and property binding can set only *properties*, not attributes.
|
||||
|
||||
正如消息中所说，`<td>`元素没有`colspan`属性。
|
||||
正如消息中所说，`<td>`元素没有`colspan` Attribute。
|
||||
但是插值表达式和属性绑定只能设置*属性*，而不是Attribute。
|
||||
|
||||
We need attribute bindings to create and bind to such attributes.
|
||||
|
|
@ -2399,7 +2409,7 @@ figure.image-display
|
|||
For example, when we apply a directive with a `myClick` selector to a `<div>` tag,
|
||||
we expect to bind to an event property that is also called `myClick`.
|
||||
|
||||
这是使用[Attribute指令](attribute-directives.html)时的常见情况。
|
||||
这是使用[属性(Attribute)型指令](attribute-directives.html)时的常见情况。
|
||||
// #enddocregion inputs-outputs-5
|
||||
+makeExample('template-syntax/ts/app/app.component.html', 'my-click')(format=".")
|
||||
// #docregion inputs-outputs-6
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@ code-example(format=".").
|
|||
Learn more about the `@Input()` decorator in the
|
||||
[Attribute Directives](../guide/attribute-directives.html#input) chapter.
|
||||
|
||||
要了解`@Input()`装饰器的更多知识，参见[Attribute型指令](../guide/attribute-directives.html#input)一章。
|
||||
要了解`@Input()`装饰器的更多知识，参见[属性型指令](../guide/attribute-directives.html#input)一章。
|
||||
.l-main-section
|
||||
:marked
|
||||
## Refresh the AppComponent
|
||||
|
|
|
|||
|
|
@ -5,12 +5,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.translated-cn {
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
|
||||
td, th {
|
||||
> p:last-child {
|
||||
margin-bottom: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue