修订完pipes

This commit is contained in:
Zhicheng Wang 2017-04-15 22:05:07 +08:00
parent 6383abb6b3
commit 5f20e0ce45
1 changed files with 31 additions and 4 deletions

View File

@ -126,7 +126,7 @@ block includes
such as a string literal or a component property. such as a string literal or a component property.
In other words, you can control the format through a binding the same way you control the birthday value through a binding. In other words, you can control the format through a binding the same way you control the birthday value through a binding.
参数值可以是任何有效的[模板表达式](./template-syntax.html#template-expressions),比如字符串字面量或组件的属性。 参数值可以是任何有效的模板表达式(参见[模板语法](./template-syntax.html)中的[模板表达式](./template-syntax.html#template-expressions)部分),比如字符串字面量或组件的属性。
换句话说,借助属性绑定,我们也可以像用绑定来控制生日的值一样,控制生日的显示格式。 换句话说,借助属性绑定,我们也可以像用绑定来控制生日的值一样,控制生日的显示格式。
Write a second component that *binds* the pipe's format parameter Write a second component that *binds* the pipe's format parameter
@ -243,13 +243,15 @@ figure.image-display
`transform`方法是管道的基本要素。 `transform`方法是管道的基本要素。
`PipeTransform`*接口*中定义了它,并用它指导各种工具和编译器。 `PipeTransform`*接口*中定义了它,并用它指导各种工具和编译器。
严格来它是可选的。Angular不会管它而是直接查找并执行`transform`方法。 理论上它是可选的。Angular不会管它而是直接查找并执行`transform`方法。
:marked :marked
Now you need a component to demonstrate the pipe. Now you need a component to demonstrate the pipe.
现在,我们需要一个组件来演示这个管道。 现在,我们需要一个组件来演示这个管道。
+makeExample('pipes/ts/src/app/power-booster.component.ts',null,'src/app/power-booster.component.ts')(format='.') +makeExample('pipes/ts/src/app/power-booster.component.ts',null,'src/app/power-booster.component.ts')(format='.')
figure.image-display figure.image-display
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster") img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")
@ -277,7 +279,7 @@ figure.image-display
In the previous example, you didn't list the `DatePipe` because all In the previous example, you didn't list the `DatePipe` because all
Angular built-in pipes are pre-registered. Angular built-in pipes are pre-registered.
如果我们忘了列出这个自定义管道Angular就会报告一个错误。 我们必须手动注册自定义管道。如果忘了Angular就会报告一个错误。
在前一个例子中我们没有把`DatePipe`列进去这是因为Angular所有的内置管道都已经预注册过了。 在前一个例子中我们没有把`DatePipe`列进去这是因为Angular所有的内置管道都已经预注册过了。
:marked :marked
@ -321,6 +323,7 @@ a#change-detection
当我们使用管道时Angular选用了一种简单、快速的变更检测算法。 当我们使用管道时Angular选用了一种简单、快速的变更检测算法。
### No pipe ### No pipe
### 无管道 ### 无管道
In the next example, the component uses the default, aggressive change detection strategy to monitor and update In the next example, the component uses the default, aggressive change detection strategy to monitor and update
@ -334,6 +337,7 @@ a#change-detection
The companion component class provides heroes, adds heroes into the array, and can reset the array. The companion component class provides heroes, adds heroes into the array, and can reset the array.
和模板相伴的组件类可以提供英雄数组,能把新的英雄添加到数组中,还能重置英雄数组。 和模板相伴的组件类可以提供英雄数组,能把新的英雄添加到数组中,还能重置英雄数组。
+makeExample('pipes/ts/src/app/flying-heroes.component.ts', 'v1', 'src/app/flying-heroes.component.ts (v1)')(format='.') +makeExample('pipes/ts/src/app/flying-heroes.component.ts', 'v1', 'src/app/flying-heroes.component.ts (v1)')(format='.')
:marked :marked
@ -346,17 +350,22 @@ a#change-detection
如果我们提供了删除或修改英雄的能力Angular也会检测到那些更改并更新显示。 如果我们提供了删除或修改英雄的能力Angular也会检测到那些更改并更新显示。
### Flying-heroes pipe ### Flying-heroes pipe
### “会飞的英雄”管道 ### “会飞的英雄”管道
Add a `FlyingHeroesPipe` to the `*ngFor` repeater that filters the list of heroes to just those heroes who can fly. Add a `FlyingHeroesPipe` to the `*ngFor` repeater that filters the list of heroes to just those heroes who can fly.
我们来往`*ngFor`重复器中添加一个`FlyingHeroesPipe`管道,这个管道能过滤出所有会飞的英雄。 我们来往`*ngFor`重复器中添加一个`FlyingHeroesPipe`管道,这个管道能过滤出所有会飞的英雄。
+makeExample('pipes/ts/src/app/flying-heroes.component.html', 'template-flying-heroes', 'src/app/flying-heroes.component.html (flyers)')(format='.') +makeExample('pipes/ts/src/app/flying-heroes.component.html', 'template-flying-heroes', 'src/app/flying-heroes.component.html (flyers)')(format='.')
:marked :marked
Here's the `FlyingHeroesPipe` implementation, which follows the pattern for custom pipes described earlier. Here's the `FlyingHeroesPipe` implementation, which follows the pattern for custom pipes described earlier.
下面是`FlyingHeroesPipe`的实现,它遵循了我们以前见过的那些写自定义管道的模式。 下面是`FlyingHeroesPipe`的实现,它遵循了我们以前见过的那些写自定义管道的模式。
+makeExample('pipes/ts/src/app/flying-heroes.pipe.ts', 'pure', 'src/app/flying-heroes.pipe.ts')(format='.') +makeExample('pipes/ts/src/app/flying-heroes.pipe.ts', 'pure', 'src/app/flying-heroes.pipe.ts')(format='.')
:marked :marked
Notice the odd behavior in the <live-example></live-example>: Notice the odd behavior in the <live-example></live-example>:
when you add flying heroes, none of them are displayed under "Heroes who fly." when you add flying heroes, none of them are displayed under "Heroes who fly."
@ -374,6 +383,7 @@ a#change-detection
来看看我们是如何添加新英雄的: 来看看我们是如何添加新英雄的:
+makeExample('pipes/ts/src/app/flying-heroes.component.ts', 'push')(format='.') +makeExample('pipes/ts/src/app/flying-heroes.component.ts', 'push')(format='.')
:marked :marked
You add the hero into the `heroes` array. The reference to the array hasn't changed. You add the hero into the `heroes` array. The reference to the array hasn't changed.
It's the same array. That's all Angular cares about. From its perspective, *same array, no change, no display update*. It's the same array. That's all Angular cares about. From its perspective, *same array, no change, no display update*.
@ -449,6 +459,7 @@ figure.image-display
在继续往下走之前,我们先理解一下*纯*和*非纯*之间的区别,从*纯*管道开始。 在继续往下走之前,我们先理解一下*纯*和*非纯*之间的区别,从*纯*管道开始。
### Pure pipes ### Pure pipes
### 纯管道 ### 纯管道
Angular executes a *pure pipe* only when it detects a *pure change* to the input value. Angular executes a *pure pipe* only when it detects a *pure change* to the input value.
@ -484,10 +495,13 @@ figure.image-display
Or you might not use a pipe at all. Or you might not use a pipe at all.
It may be better to pursue the pipe's purpose with a property of the component, It may be better to pursue the pipe's purpose with a property of the component,
a point that's discussed laterin this page. a point that's discussed laterin this page.
或者我们也可以完全不用管道。 或者我们也可以完全不用管道。
有时候,使用组件的属性能比用管道更好的达到目的,这一点我们等后面会再提起。 有时候,使用组件的属性能比用管道更好的达到目的,这一点我们等后面会再提起。
:marked :marked
### Impure pipes ### Impure pipes
### 非纯管道 ### 非纯管道
Angular executes an *impure pipe* during every component change detection cycle. Angular executes an *impure pipe* during every component change detection cycle.
@ -513,6 +527,7 @@ a#impure-flying-heroes
我们把`FlyingHeroesPipe`换成了`FlyingHeroesImpurePipe`。 我们把`FlyingHeroesPipe`换成了`FlyingHeroesImpurePipe`。
下面是完整的实现: 下面是完整的实现:
+makeTabs( +makeTabs(
'pipes/ts/src/app/flying-heroes.pipe.ts, pipes/ts/src/app/flying-heroes.pipe.ts', 'pipes/ts/src/app/flying-heroes.pipe.ts, pipes/ts/src/app/flying-heroes.pipe.ts',
'impure, pure', 'impure, pure',
@ -602,6 +617,7 @@ h3#async-pipe The impure #[i AsyncPipe]
代码如下,它使用[Angular http](server-communication.html)客户端来接收数据 代码如下,它使用[Angular http](server-communication.html)客户端来接收数据
+makeExample('src/app/fetch-json.pipe.ts') +makeExample('src/app/fetch-json.pipe.ts')
:marked :marked
Now demonstrate it in a harness component whose template defines two bindings to this pipe, Now demonstrate it in a harness component whose template defines two bindings to this pipe,
both requesting the heroes from the `heroes.json` file. both requesting the heroes from the `heroes.json` file.
@ -609,6 +625,7 @@ h3#async-pipe The impure #[i AsyncPipe]
接下来我们用一个测试台组件演示一下它,该组件的模板中定义了两个使用到此管道的绑定,他们都从`heroes.json`文件中取得英雄数据。 接下来我们用一个测试台组件演示一下它,该组件的模板中定义了两个使用到此管道的绑定,他们都从`heroes.json`文件中取得英雄数据。
+makeExample('src/app/hero-list.component.ts') +makeExample('src/app/hero-list.component.ts')
:marked :marked
The component renders as the following: The component renders as the following:
@ -620,9 +637,19 @@ figure.image-display
:marked :marked
A breakpoint on the pipe's request for data shows the following: A breakpoint on the pipe's request for data shows the following:
这个管道上的断点请求数据的过程显示:
* Each binding gets its own pipe instance. * Each binding gets its own pipe instance.
每个绑定都有它自己的管道实例。
* Each pipe instance caches its own URL and data. * Each pipe instance caches its own URL and data.
每个管道实例都缓存了它自己的URL和数据。
* Each pipe instance only calls the server once. * Each pipe instance only calls the server once.
每个管道实例都只调用一次服务器。
### *JsonPipe* ### *JsonPipe*
@ -696,7 +723,7 @@ a(id="no-filter-pipe")
:marked :marked
## Appendix: No *FilterPipe* or *OrderByPipe* ## Appendix: No *FilterPipe* or *OrderByPipe*
## 没有*FilterPipe*或者*OrderByPipe* ## 附录:没有*FilterPipe*或者*OrderByPipe*
Angular doesn't provide pipes for filtering or sorting lists. Angular doesn't provide pipes for filtering or sorting lists.
Developers familiar with AngularJS know these as `filter` and `orderBy`. Developers familiar with AngularJS know these as `filter` and `orderBy`.