修订完attribute-directives

This commit is contained in:
Zhicheng Wang 2017-04-15 21:03:04 +08:00
parent ab9cd412e6
commit 2a313651d2

View File

@ -57,7 +57,7 @@ block includes
1. Attribute directives—change the appearance or behavior of an element, component, or another directive.
属性型指令 — 改变元素显示和行为的指令。
属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
*Components* are the most common of the three directives.
You saw a component for the first time in the [QuickStart](../quickstart.html) guide.
@ -70,6 +70,7 @@ block includes
Learn about them in the [Structural Directives](structural-directives.html) guide.
*结构型*指令修改视图的结构。例如,[NgFor](template-syntax.html#ngFor) 和 [NgIf](template-syntax.html#ngIf)。
要了解更多,参见[结构型指令](structural-directives.html) guide。
*Attribute directives* are used as attributes of elements.
The built-in [NgStyle](template-syntax.html#ngStyle) directive in the
@ -96,7 +97,7 @@ block includes
directive to set an element's background color
when the user hovers over that element. You can apply it like this:
本章展示了如何创建简单的属性型指令,在用户鼠标悬浮在一个元素上时,改变它的背景色。你可以这样用它:
本章展示了如何创建一个简单的属性型指令 _myHighlight_ ,当用户把鼠标悬停在一个元素上时,改变它的背景色。你可以这样用它:
+makeExcerpt('src/app/app.component.1.html', 'applied', '')
@ -112,6 +113,8 @@ block includes
Create the following source file in the indicated folder:
在指定的文件夹下创建下列源码文件:
+makeExample('src/app/highlight.directive.1.ts')
@ -144,12 +147,14 @@ block includes
`@Directive`装饰器需要一个 CSS 选择器,以便从模板中识别出关联到这个指令的 HTML。
The [CSS selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
is the attribute name in square brackets.
Here, the directive's selector is `[myHighlight]`.
Angular locates all elements in the template that have an attribute named `myHighlight`.[用于 attribute 的 CSS 选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是属性名称加方括号。
Angular locates all elements in the template that have an attribute named `myHighlight`.
[用于 attribute 的 CSS 选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是属性名称加方括号。
这里,指令的选择器是`[myHighlight]`Angular 将会在模板中找到所有带`myHighlight`属性的元素。
.l-sub-section
:marked
### Why not call it "highlight"?
@ -226,6 +231,7 @@ block includes
这样,当 Angular 在模板中遇到`myHighlight`时,就能认出这是指令了。
+makeExample('src/app/app.module.ts')
:marked
Now when the app runs, the `myHighlight` directive highlights the paragraph text.
@ -335,6 +341,7 @@ figure.image-display
这些处理器委托给了一个辅助方法它用于为DOM元素设置颜色`el`就是你在构造器中声明和初始化过的。
+makeExcerpt('src/app/highlight.directive.2.ts (constructor)', 'ctor')
:marked
Here's the updated directive in full:
@ -348,6 +355,7 @@ figure.image-display
disappears as we move out.
运行本应用并确认:当把鼠标移到`p`上的时候,背景色就出现了,而移开的时候,它消失了。
figure.image-display
img(src="/resources/images/devguide/attribute-directives/highlight-directive-anim.gif" alt="Second Highlight")
@ -440,8 +448,12 @@ a#input-alias
### 绑定到_@Input_别名
Fortunately you can name the directive property whatever you want _and_ **_alias it_** for binding purposes.
幸运的是,我们可以随意命名该指令的属性,并且**给它指定一个用于绑定的别名**。
Restore the original property name and specify the selector as the alias in the argument to `@Input`. 恢复原始属性名,并在`@Input`的参数中把选择器`myHighlight`指定为别名。
Restore the original property name and specify the selector as the alias in the argument to `@Input`.
恢复原始属性名,并在`@Input`的参数中把选择器`myHighlight`指定为别名。
+makeExcerpt('src/app/highlight.directive.ts (color property with alias)', 'color')
@ -486,9 +498,9 @@ a#input-alias
凭空想象该指令如何工作可不容易。
在本节,我们将把`AppComponent`改成一个测试程序,它让你可以通过单选按钮来选取高亮颜色,并且把你选取的颜色绑定到指令中。
Update <code>app.component.html</code> as follows
Update <code>app.component.html</code> as follows:
:把`app.component.html`修改成这样:
把`app.component.html`修改成这样:
+makeExcerpt('src/app/app.component.html', 'v2', '')
@ -500,7 +512,10 @@ a#input-alias
+makeExcerpt('src/app/app.component.ts', 'class', '')
:marked
Here are the harness and directive in action.下面是测试程序和指令的动图。
Here are the harness and directive in action.
下面是测试程序和指令的动图。
figure.image-display
img(src="/resources/images/devguide/attribute-directives/highlight-directive-v2-anim.gif" alt="Highlight v.2")
@ -663,10 +678,12 @@ figure.image-display
They are _private_ from an Angular binding perspective.
When adorned with the `@Input` decorator, the property becomes _public_ from an Angular binding perspective.
Only then can it be bound by some other component or directive.
但组件或指令不应该盲目的信任其它组件或指令。
因此组件或指令的属性默认是不能被绑定的。
从Angular绑定机制的角度来看它们是*私有*的,而当添加了`@Input`时,它们变成了*公共*的
只有这样,它们才能被其它组件或属性绑定。
You can tell if `@Input` is needed by the position of the property name in a binding.
你可以根据属性名在绑定中出现的位置来判定是否要加`@Input`。