翻译了一部分Attribute型指令

This commit is contained in:
Zhicheng Wang 2016-05-18 17:01:12 +08:00
parent 741065aabf
commit efa2450355
2 changed files with 67 additions and 5 deletions

View File

@ -3,64 +3,109 @@ include ../_util-fns
:marked :marked
An **Attribute** directive changes the appearance or behavior of a DOM element. An **Attribute** directive changes the appearance or behavior of a DOM element.
**Attribute**型指令用于改变一个DOM元素的外观或行为。
:marked :marked
In this chapter we will In this chapter we will
本章中我们将:
* write an attribute directive to change the background color * write an attribute directive to change the background color
* 写一个用来改变背景色的Attribute型指令
* apply the attribute directive to an element in a template * apply the attribute directive to an element in a template
* 把这个Attribute型指令应用到模板中的元素
* respond to user-initiated events * respond to user-initiated events
* 响应用户引发的事件
* pass values into the directive using data binding * pass values into the directive using data binding
* 使用数据绑定把值传到指令中
[Live Example](/resources/live-examples/attribute-directives/ts/plnkr.html) [Live Example](/resources/live-examples/attribute-directives/ts/plnkr.html)
[在线例子](/resources/live-examples/attribute-directives/ts/plnkr.html)
## Directives overview ## Directives overview
## 指令概览
There are three kinds of directives in Angular: There are three kinds of directives in Angular:
在Angular中有三种类型的指令
1. Components 1. Components
1. 组件
1. Structural directives 1. Structural directives
1. 结构型指令
1. Attribute directives 1. Attribute directives
1. Attribute型指令
The *Component* is really a directive with a template. The *Component* is really a directive with a template.
It's the most common of the three directives and we write lots of them as we build our application. It's the most common of the three directives and we write lots of them as we build our application.
*组件*其实是一个带模板的指令。
它是这三种指令中最常用的,我们在构建应用程序时会写大量组件。
The [*Structural* directive](structural-directives.html) changes the DOM layout by adding and removing DOM elements. The [*Structural* directive](structural-directives.html) changes the DOM layout by adding and removing DOM elements.
[NgFor](template-syntax.html#ng-for) and [NgIf](template-syntax.html#ng-if) are two familiar examples. [NgFor](template-syntax.html#ng-for) and [NgIf](template-syntax.html#ng-if) are two familiar examples.
[*结构型*指令](structural-directives.html)会通过添加/删除DOM元素来更改DOM树布局。
[NgFor](template-syntax.html#ng-for)和[NgIf](template-syntax.html#ng-if)就是两个最熟悉的例子。
The *Attribute* directive changes the appearance or behavior of an element. The *Attribute* directive changes the appearance or behavior of an element.
The built-in [NgStyle](template-syntax.html#ng-style) directive, for example, The built-in [NgStyle](template-syntax.html#ng-style) directive, for example,
can change several element styles at the same time. can change several element styles at the same time.
*Attribute型*指令改变一个元素的外观或行为。
比如,内建的[NgStyle](template-syntax.html#ng-style)指令可以同时修改元素的多种样式。
We are going to write our own attribute directive to set an element's background color We are going to write our own attribute directive to set an element's background color
when the user hovers over that element. when the user hovers over that element.
我们准备写一个自己的Attribute型指令当用户把鼠标悬浮在元素上时它会设置元素的背景色。
.l-sub-section .l-sub-section
:marked :marked
We don't need *any* directive to simply set the background color. We don't need *any* directive to simply set the background color.
We can set it with the special [Style Binding](template-syntax.html#style-binding) like this: We can set it with the special [Style Binding](template-syntax.html#style-binding) like this:
其实我们并不需要*任何*指令来设置背景色。
我们可以通过[样式绑定](template-syntax.html#style-binding)来设置它,就像这样:
code-example. code-example.
<p [style.background]="'lime'">I am green with envy!</p> <p [style.background]="'lime'">I am green with envy!</p>
<br> <br>
:marked :marked
That wouldn't be nearly as much fun as creating our own directive. That wouldn't be nearly as much fun as creating our own directive.
但这样的话就没法享受创建自定义指令的乐趣了。
Besides, we're not just *setting* the color; we'll be *changing* the color Besides, we're not just *setting* the color; we'll be *changing* the color
in response to a user action, a mouse hover. in response to a user action, a mouse hover.
我们不仅要*设置*颜色,还要响应用户的动作(鼠标悬浮),来*修改*这个颜色。
.l-main-section .l-main-section
:marked :marked
## Build a simple attribute directive ## Build a simple attribute directive
## 创建一个简单的Attribute型指令
An attribute directive minimally requires building a controller class annotated with a An attribute directive minimally requires building a controller class annotated with a
`Directive` decorator. The `Directive` decorator specifies the selector identifying `Directive` decorator. The `Directive` decorator specifies the selector identifying
the attribute associated with the directive. the attribute associated with the directive.
The controller class implements the desired directive behavior. The controller class implements the desired directive behavior.
Attribute型指令至少需要一个带有`Directive`装饰器的控制器类。`Directive`装饰器指定了一个选择器用于指出与此指令相关的Attribute。
控制器类实现了指令需要具备的行为。
Let's build a small illustrative example together. Let's build a small illustrative example together.
让我们构建一个小例子来说明它。
:marked :marked
### Our first draft ### Our first draft
### 第一个草稿
Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html). Create a new project folder (`attribute-directives`) and follow the steps in the [QuickStart](../quickstart.html).
创建一个项目文件夹(`attribute-directives`)并按照[快速起步](../quickstart.html)中的步骤进行初始化。
include ../_quickstart_repo include ../_quickstart_repo
:marked :marked
Add a new file to the `app` folder called `highlight.directive.ts` and add the following code: Add a new file to the `app` folder called `highlight.directive.ts` and add the following code:
在`app`文件夹中创建一个名叫`highlight.directive.ts`的文件,并且添加下列代码:
+makeExample('attribute-directives/ts/app/highlight.directive.1.ts', null, 'app/highlight.directive.ts') +makeExample('attribute-directives/ts/app/highlight.directive.1.ts', null, 'app/highlight.directive.ts')
:marked :marked
@ -70,6 +115,11 @@ include ../_quickstart_repo
so we can access the DOM element. so we can access the DOM element.
We don't need `Input` immediately but we will need it later in the chapter. We don't need `Input` immediately but we will need it later in the chapter.
我们先从Angular库中导入一些符号。
我们要为使用`@Directive`装饰器而导入`Directive`。
我们要为[注入](dependency-injection.html)到指令的构造函数中而导入`ElementRef`这样我们才能访问DOM元素。
虽然眼下还不需要`Input`,但在稍后的章节中我们很快就会用到它。
Then we define the directive metadata in a configuration object passed Then we define the directive metadata in a configuration object passed
as an argument to the `@Directive` decorator function. as an argument to the `@Directive` decorator function.
A `@Directive` decorator for an attribute directive requires a css selector to identify A `@Directive` decorator for an attribute directive requires a css selector to identify
@ -77,17 +127,29 @@ include ../_quickstart_repo
The [css selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) The [css selector for an attribute](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)
is the attribute name in square brackets. is the attribute name in square brackets.
然后,我们通过给`@Directive`装饰器函数传入一个“配置对象”来定义指令的元数据。
Attribute型指令的`@Directive`装饰器需要一个css选择器以便从模板中识别出关联到我们这个指令的HTML。
[css中的attribute选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors)就是Attribute名称加方括号。
Our directive's selector is `[myHighlight]`. Our directive's selector is `[myHighlight]`.
Angular will locate all elements in the template that have an attribute named `myHighlight`. Angular will locate all elements in the template that have an attribute named `myHighlight`.
我们这个指令的选择器是`[myHighlight]`于是Angular就会在模板中找到带有`myHighlight`这个Attribute的元素。
.l-sub-section .l-sub-section
:marked :marked
### Why not call it "highlight"? ### Why not call it "highlight"?
### 为什么不直接叫做"highlight"
*highlight* is a nicer name than *myHighlight* and, technically, it would work if we called it that. *highlight* is a nicer name than *myHighlight* and, technically, it would work if we called it that.
从技术上说,*highlight*是一个比*myHighlight*更好的名字,而且在这里它确实能工作。
However, we recommend picking a selector name with a prefix to ensure However, we recommend picking a selector name with a prefix to ensure
that it cannot conflict with any standard HTML attribute, now or in the future. 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. There is also less risk of colliding with a third-party directive name when we give ours a prefix.
不过我们还是建议选择一个带前缀的选择器名称以保证无论现在还是未来它都不会和任何标准HTML Attribute发生冲突。
We do **not** prefix our `highlight` directive name with **`ng`**. We do **not** prefix our `highlight` directive name with **`ng`**.
That prefix belongs to Angular and That prefix belongs to Angular and
we don't want to confuse our directives with their directives. we don't want to confuse our directives with their directives.

View File

@ -8,15 +8,15 @@ include ../_util-fns
我们以把*一些*测试弄成功为开始。 我们以把*一些*测试弄成功为开始。
We will learn We will learn
- basic Jasmine testing skills
- to run our tests in the browser
- to write simple Jasmine tests in TypeScript
- to debug a test in the browser
我们会学到: 我们会学到:
- basic Jasmine testing skills
- 基础Jasmine测试技能 - 基础Jasmine测试技能
- to run our tests in the browser
- 在浏览器里面运行我们的测试 - 在浏览器里面运行我们的测试
- to write simple Jasmine tests in TypeScript
- 使用TypeScript编写简单的Jasmine测试 - 使用TypeScript编写简单的Jasmine测试
- to debug a test in the browser
- 在浏览器里调试一个测试 - 在浏览器里调试一个测试
**Create a new project folder** perhaps called `angular2-unit-testing`. **Create a new project folder** perhaps called `angular2-unit-testing`.