翻译了一部分Attribute型指令
This commit is contained in:
parent
741065aabf
commit
efa2450355
|
@ -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.
|
||||||
|
|
|
@ -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`.
|
||||||
|
|
Loading…
Reference in New Issue