diff --git a/public/docs/ts/latest/tutorial/toh-pt6.jade b/public/docs/ts/latest/tutorial/toh-pt6.jade index a817cdf327..31baf9eebd 100644 --- a/public/docs/ts/latest/tutorial/toh-pt6.jade +++ b/public/docs/ts/latest/tutorial/toh-pt6.jade @@ -765,56 +765,98 @@ block observables-section * `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. + * `distinctUntilChanged`确保只在过滤条件变化时才发送请求,这样就不会重复请求同一个搜索词了。 + * `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. + + * `switchMap`会为每个从`debounce`和`distinctUntilChanged`中通关的搜索词调用搜索服务。它会丢弃以前的搜索Observable,只保留最近的。 .l-sub-section :marked The [switchMap operator](https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/flatmaplatest.md) (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. Even with a 300ms pause between requests, we could have multiple http requests in flight and they may not return in the order sent. + + 每次符合条件的按键事件都会触发一次http调用。即使在发送每个请求前都有300毫秒的延迟,我们仍然可能同时拥有多个在途的HTTP请求,并且它们返回的顺序未必就是发送时的顺序。 `switchMap` preserves the original request order while returning only the observable from the most recent http call. 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 if the search text is empty. + + 如果搜索框为空,我们还可以短路掉这次http调用,并且直接返回一个包含空数组的可观察对象。 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. We are content for now to discard unwanted results. + + 注意,_取消_`HeroSearchService`的可观察对象并不会实际中止(abort)一个未完成的http请求,除非有一天我们支持了这个特性,这个问题我们以后再讨论。 + 目前我们的任务只是丢弃不希望的结果。 + :marked * `catch` intercepts a failed observable. 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. + + * `catch`拦截失败的Observable。这个简单的例子中只是把错误信息打印到控制台(但实际的应用需要做更多事),然后返回一个包含空数组的可观察对象,以清空搜索结果。 ### Import RxJS operators + + ### 导入RxJS操作符 + The RxJS operators are not available in Angular's base `Observable` implementation. We have to extend `Observable` by *importing* them. + + Angular的基本版`Observable`实现中,RxJS操作符是不可用的。 + 我们得*导入*它们,以扩展`Observable`。 We could extend `Observable` with just the operators we need here by including the pertinent `import` statements at the top of this file. + + 通过在本文件的顶部写上适当的`import`语句,我们可以为`Observable`扩展出这里用到的那些操作符。 .l-sub-section :marked Many authorities say we should do just that. + + 有很多权威人士建议我们这样做。 + :marked 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. + + 在这个例子中,我们使用一些不同的方法。 + 我们把整个应用中要用的那些RxJS `Observable`扩展组合在一起,放在一个单独的RxJS导入文件中。 +makeExample('toh-6/ts/app/rxjs-extensions.ts', null, 'app/rxjs-extensions.ts')(format=".") + :marked 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=".") + :marked 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. At some point it might look like this. + + 最后,我们把`HeroSearchComponent`添加到`DashboardComponent`的地步。 + 再次运行该应用,跳转到*Dashboard*,并在英雄下方的搜索框里输入一些文本。 + 看起来就像这样: figure.image-display img(src='/resources/images/devguide/toh/toh-hero-search.png' alt="Hero Search Component")