翻译完了新增 部分

This commit is contained in:
Zhicheng Wang 2016-07-25 12:42:36 +08:00
parent 5532c54ff7
commit 3233fc4a76

View File

@ -765,57 +765,99 @@ block observables-section
* `distinctUntilChanged` ensures that we only send a request if the filter text changed. * `distinctUntilChanged` ensures that we only send a request if the filter text changed.
There's no point in repeating a request for the same search term. There's no point in repeating a request for the same search term.
* `distinctUntilChanged`确保只在过滤条件变化时才发送请求,这样就不会重复请求同一个搜索词了。
* `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet. * `switchMap` calls our search service for each search term that makes it through the `debounce` and `distinctUntilChanged` gauntlet.
It cancels and discards previous search observables, returning only the latest search service observable. It cancels and discards previous search observables, returning only the latest search service observable.
* `switchMap`会为每个从`debounce`和`distinctUntilChanged`中通关的搜索词调用搜索服务。它会丢弃以前的搜索Observable只保留最近的。
.l-sub-section .l-sub-section
:marked :marked
The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md) The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
(formerly known as "flatMapLatest") is very clever. (formerly known as "flatMapLatest") is very clever.
[switchMap操作符](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md)
(以前叫"flatMapLatest")是非常智能的。
Every qualifying key event can trigger an http call. Every qualifying key event can trigger an http call.
Even with a 300ms pause between requests, we could have multiple http requests in flight Even with a 300ms pause between requests, we could have multiple http requests in flight
and they may not return in the order sent. and they may not return in the order sent.
每次符合条件的按键事件都会触发一次http调用。即使在发送每个请求前都有300毫秒的延迟我们仍然可能同时拥有多个在途的HTTP请求并且它们返回的顺序未必就是发送时的顺序。
`switchMap` preserves the original request order while returning `switchMap` preserves the original request order while returning
only the observable from the most recent http call. only the observable from the most recent http call.
Results from prior calls are canceled and discarded. Results from prior calls are canceled and discarded.
`switchMap`保留了原始的请求顺序并且只返回最近一次http调用返回的可观察对象。
这是因为以前的调用都被取消或丢弃了。
We also short-circuit the http call and return an observable containing an empty array We also short-circuit the http call and return an observable containing an empty array
if the search text is empty. if the search text is empty.
如果搜索框为空我们还可以短路掉这次http调用并且直接返回一个包含空数组的可观察对象。
Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending http request Note that _canceling_ the `HeroSearchService` observable won't actually abort a pending http request
until the service supports that feature, a topic for another day. until the service supports that feature, a topic for another day.
We are content for now to discard unwanted results. We are content for now to discard unwanted results.
注意_取消_`HeroSearchService`的可观察对象并不会实际中止abort一个未完成的http请求除非有一天我们支持了这个特性这个问题我们以后再讨论。
目前我们的任务只是丢弃不希望的结果。
:marked :marked
* `catch` intercepts a failed observable. * `catch` intercepts a failed observable.
Our simple example prints the error to the console; a real life application should do better. Our simple example prints the error to the console; a real life application should do better.
Then we return an observable containing an empty array to clear the search result. Then we return an observable containing an empty array to clear the search result.
* `catch`拦截失败的Observable。这个简单的例子中只是把错误信息打印到控制台但实际的应用需要做更多事然后返回一个包含空数组的可观察对象以清空搜索结果。
### Import RxJS operators ### Import RxJS operators
### 导入RxJS操作符
The RxJS operators are not available in Angular's base `Observable` implementation. The RxJS operators are not available in Angular's base `Observable` implementation.
We have to extend `Observable` by *importing* them. We have to extend `Observable` by *importing* them.
Angular的基本版`Observable`实现中RxJS操作符是不可用的。
我们得*导入*它们,以扩展`Observable`。
We could extend `Observable` with just the operators we need here by We could extend `Observable` with just the operators we need here by
including the pertinent `import` statements at the top of this file. including the pertinent `import` statements at the top of this file.
通过在本文件的顶部写上适当的`import`语句,我们可以为`Observable`扩展出这里用到的那些操作符。
.l-sub-section .l-sub-section
:marked :marked
Many authorities say we should do just that. Many authorities say we should do just that.
有很多权威人士建议我们这样做。
:marked :marked
We take a different approach in this example. We take a different approach in this example.
We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file. We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
在这个例子中,我们使用一些不同的方法。
我们把整个应用中要用的那些RxJS `Observable`扩展组合在一起放在一个单独的RxJS导入文件中。
+makeExample('toh-6/ts/app/rxjs-extensions.ts', null, 'app/rxjs-extensions.ts')(format=".") +makeExample('toh-6/ts/app/rxjs-extensions.ts', null, 'app/rxjs-extensions.ts')(format=".")
:marked :marked
We load them all at once by importing `rxjs-extensions` in `AppComponent`. We load them all at once by importing `rxjs-extensions` in `AppComponent`.
我们在`AppComponent`中导入`rxjs-extensions`就可以一次性加载它们。
+makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app/app.component.ts')(format=".") +makeExample('toh-6/ts/app/app.component.ts', 'rxjs-extensions', 'app/app/app.component.ts')(format=".")
:marked :marked
Finally, we add the `HeroSearchComponent` to the bottom of the `DashboardComponent`. Finally, we add the `HeroSearchComponent` to the bottom of the `DashboardComponent`.
Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles. Run the app again, go to the *Dashboard*, and enter some text in the search box below the hero tiles.
At some point it might look like this. At some point it might look like this.
最后,我们把`HeroSearchComponent`添加到`DashboardComponent`的地步。
再次运行该应用,跳转到*Dashboard*,并在英雄下方的搜索框里输入一些文本。
看起来就像这样:
figure.image-display figure.image-display
img(src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component") img(src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component")