guide/server-communication.jade review is done.
This commit is contained in:
		
							parent
							
								
									82f5b1c035
								
							
						
					
					
						commit
						49a2deb37b
					
				| @ -96,7 +96,7 @@ block rxjs-import | |||||||
|   :marked |   :marked | ||||||
|     We'll talk about that [below](#rxjs) when we're ready to explore observables. |     We'll talk about that [below](#rxjs) when we're ready to explore observables. | ||||||
|      |      | ||||||
|     如果准备好学习可观察对象了,我们就[继续](#rxjs)。 |     等准备好时,我们会在[后面](#rxjs)讲述可观察对象。 | ||||||
| :marked | :marked | ||||||
|   First, we have to configure our application to use server communication facilities. |   First, we have to configure our application to use server communication facilities. | ||||||
| 
 | 
 | ||||||
| @ -136,7 +136,7 @@ block http-providers | |||||||
|     We begin by importing the symbols we need, most of them familiar by now. The newcomer is `HTTP_PROVIDERS`,  |     We begin by importing the symbols we need, most of them familiar by now. The newcomer is `HTTP_PROVIDERS`,  | ||||||
|     a collection of service providers from the !{_Angular_http_library}. |     a collection of service providers from the !{_Angular_http_library}. | ||||||
|      |      | ||||||
|     我们从导入所需的符号开始,它们中的大多数我们都熟悉了,只有`HTTP_PROVIDERS`是新面孔,来自!{_Angular_http_libraryCn}的一组服务供应商。 |     我们从导入所需的符号开始,它们中的大多数我们都熟悉了,只有`HTTP_PROVIDERS`是新面孔,它是来自!{_Angular_http_libraryCn}的一组服务供应商。 | ||||||
|   |   | ||||||
|     We register HTTP providers in the bootstrap method by passing them in an array as the second parameter after the root component. |     We register HTTP providers in the bootstrap method by passing them in an array as the second parameter after the root component. | ||||||
|      |      | ||||||
| @ -178,7 +178,7 @@ h1#http-client 《英雄指南》#[i HTTP]客户端的演示 | |||||||
|   This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server. |   This version gets some heroes from the server, displays them in a list, lets us add new heroes, and saves them to the server. | ||||||
|   We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`. |   We use the !{_Angular_Http} client to communicate via `XMLHttpRequest (XHR)`. | ||||||
|    |    | ||||||
|   我们的第一个演示是《英雄指南(TOH)》教程的一个mini版。 |   我们的第一个演示是《英雄指南(TOH)》教程的一个迷你版。 | ||||||
|   这个版本从服务器获取一些英雄,把它们显示在列表中,还允许我们添加新的英雄并将其保存到服务器。 |   这个版本从服务器获取一些英雄,把它们显示在列表中,还允许我们添加新的英雄并将其保存到服务器。 | ||||||
|   我们借助!{_Angular_Http}客户端,来通过`XMLHttpRequest (XHR)`与服务器通讯。 |   我们借助!{_Angular_Http}客户端,来通过`XMLHttpRequest (XHR)`与服务器通讯。 | ||||||
| 
 | 
 | ||||||
| @ -203,7 +203,7 @@ figure.image-display | |||||||
|    |    | ||||||
|   它使用`ngFor`来展现这个英雄列表。 |   它使用`ngFor`来展现这个英雄列表。 | ||||||
|   列表的下方是一个输入框和一个*Add Hero*按钮,在那里,我们可以输入新英雄的名字,并把他们加到数据库中。 |   列表的下方是一个输入框和一个*Add Hero*按钮,在那里,我们可以输入新英雄的名字,并把他们加到数据库中。 | ||||||
|   我们在`(click)`事件绑定中使用[模板引用变量](template-syntax.html#ref-vars)`NewHeroName`来访问这个输入框的值。 |   我们在`(click)`事件绑定中使用[模板引用变量](template-syntax.html#ref-vars)`newHeroName`来访问这个输入框的值。 | ||||||
|   当用户点击此按钮时,我们把这个值传给组件的`addHero`方法,然后清除它,以备输入新英雄的名字。 |   当用户点击此按钮时,我们把这个值传给组件的`addHero`方法,然后清除它,以备输入新英雄的名字。 | ||||||
|    |    | ||||||
|   Below the button is an area for an error message. |   Below the button is an area for an error message. | ||||||
| @ -269,7 +269,7 @@ block getheroes-and-addhero | |||||||
|     produces a success event (with the hero data in the event payload) or a fail event (with the error in the payload). |     produces a success event (with the hero data in the event payload) or a fail event (with the error in the payload). | ||||||
|      |      | ||||||
|     我们可以把可观察对象`Observable`看做一个由某些“源”发布的事件流。 |     我们可以把可观察对象`Observable`看做一个由某些“源”发布的事件流。 | ||||||
|     我们通过***订阅***到可观察对象`Observable`来监听这个流中的那些事件。 |     我们通过***订阅***到可观察对象`Observable`来监听这个流中的事件。 | ||||||
|     在这些订阅中,我们指定了当Web请求生成了一个成功事件(有效载荷是英雄数据)或失败事件(有效载荷是错误对象)时该如何采取行动。 |     在这些订阅中,我们指定了当Web请求生成了一个成功事件(有效载荷是英雄数据)或失败事件(有效载荷是错误对象)时该如何采取行动。 | ||||||
| 
 | 
 | ||||||
| :marked | :marked | ||||||
| @ -322,18 +322,18 @@ h2#fetch-data 通过#[b HeroService]获取数据 | |||||||
| block rxjs | block rxjs | ||||||
|   :marked |   :marked | ||||||
|     <a id="rxjs"></a> |     <a id="rxjs"></a> | ||||||
|      |     The return value may surprise us. | ||||||
|     The return value may surprise us.  |  | ||||||
|     Many of us who are familiar with asynchronous methods in modern JavaScript would expect the `get` method to return a  |     Many of us who are familiar with asynchronous methods in modern JavaScript would expect the `get` method to return a  | ||||||
|     [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). |     [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). | ||||||
|     We'd expect to chain a call to `then()` and extract the heroes. |     We'd expect to chain a call to `then()` and extract the heroes. | ||||||
|     Instead we're calling a `map()` method.  |     Instead we're calling a `map()` method.  | ||||||
|     Clearly this is not a promise. |     Clearly this is not a promise. | ||||||
|      | 
 | ||||||
|  |     <a id="rxjs"></a> | ||||||
|     返回值可能会让我们感到意外。 |     返回值可能会让我们感到意外。 | ||||||
|     如果按照很多人在现代JavaScript中所熟悉的那种异步调用方法,`get`方法应该返回一个 |     如果按照很多人在现代JavaScript中所熟悉的那种异步调用方法,`get`方法应该返回一个 | ||||||
|     [承诺(promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) |     [承诺(promise)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)。 | ||||||
|     我们没有把一个函数调用链接进`then()`方法中,并从回调参数中取得英雄列表,而是调用了一个`map()`方法。 |     我们可能期待链接调用`then()`方法并从中取得英雄列表,取而代之,我们调用了一个`map()`方法。 | ||||||
|     显然,这并不是承诺(Promise)。 |     显然,这并不是承诺(Promise)。 | ||||||
| 
 | 
 | ||||||
|     In fact, the `http.get` method returns an **Observable** of HTTP Responses (`Observable<Response>`) from the RxJS library |     In fact, the `http.get` method returns an **Observable** of HTTP Responses (`Observable<Response>`) from the RxJS library | ||||||
| @ -358,7 +358,7 @@ block rxjs | |||||||
|      |      | ||||||
|     这本开发指南中的所有例子都安装了RxJS的npm包,而且都被`system.js`加载过了。这是因为可观察对象在Angular应用中使用非常广泛。 |     这本开发指南中的所有例子都安装了RxJS的npm包,而且都被`system.js`加载过了。这是因为可观察对象在Angular应用中使用非常广泛。 | ||||||
|     我们在使用HTTP客户端的时候当然就更需要它了。 |     我们在使用HTTP客户端的时候当然就更需要它了。 | ||||||
|     不过仍然得经过一些额外的步骤才能让RxJS可观察对象在此处可用。 |     不过仍然得经过一个关键步骤,能让RxJS可观察对象在此处可用。 | ||||||
| 
 | 
 | ||||||
|     ### Enable RxJS Operators |     ### Enable RxJS Operators | ||||||
|     ### 启用RxJS操作符 |     ### 启用RxJS操作符 | ||||||
| @ -385,14 +385,14 @@ block rxjs | |||||||
|     While that is the easiest thing to do, we'd pay a penalty in extended launch time and application size |     While that is the easiest thing to do, we'd pay a penalty in extended launch time and application size | ||||||
|     because the full library is so big. We only use a few operators in our app. |     because the full library is so big. We only use a few operators in our app. | ||||||
|      |      | ||||||
|     我们确实可以把_每一个_RxJS操作符都通过单一的import语句添加进去。 |     我们可以通过一条import语句把*每个*RxJS操作符都添加进来。 | ||||||
|     虽然这是最简单的方式,但我们也得付出代价,主要是在启动时间和应用大小上,因为完整的库实在太大了。 |     虽然这是最简单的方式,但我们也得付出代价,主要是在启动时间和应用大小上,因为完整的库实在太大了。 | ||||||
|     而我们其实只要用到少量操作符。 |     而我们其实只需要用到少量操作符。 | ||||||
|      |      | ||||||
|     Instead, we'll import each `Observable` operator and static class method, one-by-one, until we have a custom *Observable* implementation tuned |     Instead, we'll import each `Observable` operator and static class method, one-by-one, until we have a custom *Observable* implementation tuned | ||||||
|     precisely to our requirements. We'll put the `import` statements in one `app/rxjs-operators.ts` file. |     precisely to our requirements. We'll put the `import` statements in one `app/rxjs-operators.ts` file. | ||||||
|      |      | ||||||
|     替代方案是,我们将一个一个的导入`Observable`的操作符和静态类方法,直到我们得到了一个精确贴合我们需求的自定义*Observable*实现。 |     取而代之,我们将一个一个的导入`Observable`的操作符和静态类方法,直到我们得到了一个精确符合我们需求的自定义*Observable*实现。 | ||||||
|     我们将把这些`import`语句放进一个`app/rxjs-operators.ts`文件里。 |     我们将把这些`import`语句放进一个`app/rxjs-operators.ts`文件里。 | ||||||
|   +makeExample('server-communication/ts/app/rxjs-operators.ts', null, 'app/rxjs-operators.ts')(format=".") |   +makeExample('server-communication/ts/app/rxjs-operators.ts', null, 'app/rxjs-operators.ts')(format=".") | ||||||
|   :marked |   :marked | ||||||
| @ -422,13 +422,13 @@ a#extract-data | |||||||
|   ## 处理Response响应对象 |   ## 处理Response响应对象 | ||||||
|   Remember that our `getHeroes()` method mapped the `#{_priv}http.get` response object to heroes with an `#{_priv}extractData` helper method: |   Remember that our `getHeroes()` method mapped the `#{_priv}http.get` response object to heroes with an `#{_priv}extractData` helper method: | ||||||
|    |    | ||||||
|   记住,我们的`getHeroes()`借助一个`#{_priv}extractData`辅助方法来把`#{_priv}http.get`的响应对象映射成了英雄列表: |   记住,`getHeroes()`借助一个`#{_priv}extractData`辅助方法来把`#{_priv}http.get`的响应对象映射成了英雄列表: | ||||||
| +makeExample('server-communication/ts/app/toh/hero.service.ts', 'extract-data', 'app/toh/hero.service.ts (excerpt)')(format=".") | +makeExample('server-communication/ts/app/toh/hero.service.ts', 'extract-data', 'app/toh/hero.service.ts (excerpt)')(format=".") | ||||||
| :marked | :marked | ||||||
|   The `response` object does not hold our data in a form we can use directly.  |   The `response` object does not hold our data in a form we can use directly.  | ||||||
|   To make it useful in our application we must parse the response data into a JSON object |   To make it useful in our application we must parse the response data into a JSON object | ||||||
|    |    | ||||||
|   这个`response`对象并没有使用我们能直接处理的形式保存数据。 |   这个`response`对象并没有以一种我们能直接使用的格式来保存数据。 | ||||||
|   要让它在应用程序中可用,我们就必须把这个相应数据解析成一个JSON对象。 |   要让它在应用程序中可用,我们就必须把这个相应数据解析成一个JSON对象。 | ||||||
| 
 | 
 | ||||||
|   #### Parse to JSON |   #### Parse to JSON | ||||||
| @ -449,7 +449,7 @@ block parse-json | |||||||
|       That spec defines a `json()` method that parses the response body into a JavaScript object. |       That spec defines a `json()` method that parses the response body into a JavaScript object. | ||||||
|        |        | ||||||
|       这不是Angular自己的设计。 |       这不是Angular自己的设计。 | ||||||
|       Angular HTTP客户端遵循了ES2015的[响应对象](https://fetch.spec.whatwg.org/#response-class)规范,它由`Fetch`函数返回。 |       Angular HTTP客户端遵循ES2015规范来处理`Fetch`函数返回[响应对象](https://fetch.spec.whatwg.org/#response-class)。 | ||||||
|       此规范中定义了一个`json()`函数,来把响应体解析成JavaScript对象。 |       此规范中定义了一个`json()`函数,来把响应体解析成JavaScript对象。 | ||||||
| 
 | 
 | ||||||
| .l-sub-section | .l-sub-section | ||||||
| @ -462,7 +462,7 @@ block parse-json | |||||||
|      |      | ||||||
|     我们不能期待解码后的JSON直接就是一个英雄数组。 |     我们不能期待解码后的JSON直接就是一个英雄数组。 | ||||||
|     我们调用的这个服务器总会把JSON结果包装进一个带`data`属性的对象中。 |     我们调用的这个服务器总会把JSON结果包装进一个带`data`属性的对象中。 | ||||||
|     我们必须解开它才能得到英雄数组。这是一个约定俗成的Web API行为规范,它是出于  |     我们必须解开它才能得到英雄数组。这是一个约定俗成的Web API行为规范,它是出于 | ||||||
|     [安全方面的考虑](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside)。 |     [安全方面的考虑](https://www.owasp.org/index.php/OWASP_AJAX_Security_Guidelines#Always_return_JSON_with_an_Object_on_the_outside)。 | ||||||
| .alert.is-important | .alert.is-important | ||||||
|   :marked |   :marked | ||||||
| @ -515,11 +515,11 @@ a#error-handling | |||||||
|    |    | ||||||
|   一旦开始与I/O打交道,我们就必须准备好接受墨菲定律:如果一件倒霉事*可能*发生,它就*迟早会*发生。 |   一旦开始与I/O打交道,我们就必须准备好接受墨菲定律:如果一件倒霉事*可能*发生,它就*迟早会*发生。 | ||||||
|   我们可以在`HeroService`中捕获错误,并对它们做些处理。 |   我们可以在`HeroService`中捕获错误,并对它们做些处理。 | ||||||
|   也可以把错误信息传回到组件,让组件展示给最终用户,但只能用一些他们可以理解并照办的表达方式。 |   在用户可以理解并采取相应行动的时候,我们也可以把错误信息传回到组件,让组件展示给最终用户。 | ||||||
| 
 | 
 | ||||||
|   In this simple app we provide rudimentary error handling in both the service and the component. |   In this simple app we provide rudimentary error handling in both the service and the component. | ||||||
|    |    | ||||||
|   在这个简单的应用中,我们在服务中和组件中都只提供了最原始的错误处理方式。 |   在这个简单的应用中,我们在服务和组件中都只提供了最原始的错误处理方式。 | ||||||
| block error-handling | block error-handling | ||||||
|   :marked |   :marked | ||||||
|     The eagle-eyed reader may have spotted our use of the `catch` operator in conjunction with a `handleError` method. |     The eagle-eyed reader may have spotted our use of the `catch` operator in conjunction with a `handleError` method. | ||||||
| @ -585,7 +585,7 @@ block hlc-error-handling | |||||||
| :marked | :marked | ||||||
|   To implement it, we need to know some details about the server's api for creating heroes. |   To implement it, we need to know some details about the server's api for creating heroes. | ||||||
|    |    | ||||||
|   要实现它,我们得知道关于服务端API要如何创建英雄的一些细节。 |   要实现它,我们得知道关于服务端API如何创建英雄的一些细节。 | ||||||
|    |    | ||||||
|   [Our data server](#server) follows typical REST guidelines. |   [Our data server](#server) follows typical REST guidelines. | ||||||
|   It expects a [`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) request |   It expects a [`POST`](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) request | ||||||
| @ -684,7 +684,7 @@ block promises | |||||||
|       Don't rush to promises until you give observables a chance. |       Don't rush to promises until you give observables a chance. | ||||||
|        |        | ||||||
|       可能“承诺”看起来更熟悉一些,但“可观察对象”有很多优越之处。 |       可能“承诺”看起来更熟悉一些,但“可观察对象”有很多优越之处。 | ||||||
|       不要匆匆忙忙的就决定用“承诺”,你值得给“可观察对象”一次机会。 |       不要匆匆忙忙的就决定用“承诺”,值得给“可观察对象”一次机会。 | ||||||
|   :marked |   :marked | ||||||
|     Let's rewrite the `HeroService` using promises , highlighting just the parts that are different. |     Let's rewrite the `HeroService` using promises , highlighting just the parts that are different. | ||||||
|      |      | ||||||
| @ -715,7 +715,7 @@ block promises | |||||||
| 
 | 
 | ||||||
|     We have to adjust the calling component to expect a `Promise` instead of an `Observable`. |     We have to adjust the calling component to expect a `Promise` instead of an `Observable`. | ||||||
|      |      | ||||||
|     为了用`Observable`代替`Promise`,我们还得对调用方组件进行调整。 |     我们还得对调用方组件进行调整,让它期待一个`Promise`而非`Observable`。 | ||||||
| 
 | 
 | ||||||
|   +makeTabs( |   +makeTabs( | ||||||
|     'server-communication/ts/app/toh/hero-list.component.promise.ts, server-communication/ts/app/toh/hero-list.component.ts',  |     'server-communication/ts/app/toh/hero-list.component.promise.ts, server-communication/ts/app/toh/hero-list.component.ts',  | ||||||
| @ -747,7 +747,7 @@ block promises | |||||||
| 
 | 
 | ||||||
|       Learn more about observables to understand the implications and consequences of subscriptions. |       Learn more about observables to understand the implications and consequences of subscriptions. | ||||||
|        |        | ||||||
|       请学习更多关于可观察对象的知识,来理解订阅的实现和效果。 |       请学习更多关于可观察对象的知识,来理解订阅Subscription的实现和效果。 | ||||||
| 
 | 
 | ||||||
| h2#cors Cross-origin requests: Wikipedia example | h2#cors Cross-origin requests: Wikipedia example | ||||||
| h2#cors 跨域请求:Wikipedia范例 | h2#cors 跨域请求:Wikipedia范例 | ||||||
| @ -764,7 +764,7 @@ h2#cors 跨域请求:Wikipedia范例 | |||||||
|   The *origin* is the combination of URI scheme, hostname and port number.  |   The *origin* is the combination of URI scheme, hostname and port number.  | ||||||
|   This is called the [Same-origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy). |   This is called the [Same-origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy). | ||||||
|    |    | ||||||
|   出于安全的考虑,Web浏览器会阻止到与当前页面不“同源”的远端服务器的`XHR`调用。 |   出于安全的考虑,网络浏览器会阻止调用与当前页面不“同源”的远端服务器的`XHR`。 | ||||||
|   所谓*源*就是URI的协议(scheme)、主机名(host)和端口号(port)这几部分的组合。 |   所谓*源*就是URI的协议(scheme)、主机名(host)和端口号(port)这几部分的组合。 | ||||||
|   这被称为[同源策略](https://en.wikipedia.org/wiki/Same-origin_policy)。 |   这被称为[同源策略](https://en.wikipedia.org/wiki/Same-origin_policy)。 | ||||||
| 
 | 
 | ||||||
| @ -781,7 +781,7 @@ h2#cors 跨域请求:Wikipedia范例 | |||||||
|   Some servers do not support CORS but do support an older, read-only alternative called [JSONP](https://en.wikipedia.org/wiki/JSONP). |   Some servers do not support CORS but do support an older, read-only alternative called [JSONP](https://en.wikipedia.org/wiki/JSONP). | ||||||
|   Wikipedia is one such server. |   Wikipedia is one such server. | ||||||
|    |    | ||||||
|   有些服务器不支持CORS,但支持一种老的、只读的(译注:即仅支持GET)替代协议,那就是[JSONP](https://en.wikipedia.org/wiki/JSONP)。 |   有些服务器不支持CORS,但支持一种老的、只读的(译注:即仅支持GET)替代协议,这就是[JSONP](https://en.wikipedia.org/wiki/JSONP)。 | ||||||
|   Wikipedia就是一个这样的服务器。 |   Wikipedia就是一个这样的服务器。 | ||||||
| .l-sub-section | .l-sub-section | ||||||
|   :marked |   :marked | ||||||
| @ -806,8 +806,8 @@ block wikipedia-jsonp+ | |||||||
|     All other HTTP methods throw an error because JSONP is a read-only facility.  |     All other HTTP methods throw an error because JSONP is a read-only facility.  | ||||||
|      |      | ||||||
|     Wikipedia提供了一个现代的`CORS` API和一个传统的`JSONP`搜索API。在这个例子中,我们使用后者。 |     Wikipedia提供了一个现代的`CORS` API和一个传统的`JSONP`搜索API。在这个例子中,我们使用后者。 | ||||||
|     Angular的`Jsonp`服务既通过JSONP扩展了`#{_Http}`服务,又限制了我们只能用`GET`请求。 |     Angular的`Jsonp`服务不但通过JSONP扩展了`#{_Http}`服务,而且限制我们只能用`GET`请求。 | ||||||
|     尝试调用所有其它HTTP方法都将抛出一个错误,这是因为JSONP是只读的。 |     尝试调用所有其它HTTP方法都将抛出一个错误,因为JSONP是只读的。 | ||||||
| 
 | 
 | ||||||
|     As always, we wrap our interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`. |     As always, we wrap our interaction with an Angular data access client service inside a dedicated service, here called `WikipediaService`. | ||||||
|      |      | ||||||
| @ -833,7 +833,7 @@ block wikipedia-jsonp+ | |||||||
|      |      | ||||||
|     [Wikipedia 的 'opensearch' API](https://www.mediawiki.org/wiki/API:Opensearch)期待在所请求的URL中带四个查询参数(键/值对格式)。 |     [Wikipedia 的 'opensearch' API](https://www.mediawiki.org/wiki/API:Opensearch)期待在所请求的URL中带四个查询参数(键/值对格式)。 | ||||||
|     这些键(key)分别是`search`、`action`、`format`和`callback`。 |     这些键(key)分别是`search`、`action`、`format`和`callback`。 | ||||||
|     `search`的值是一个用户提供的打算在Wikipedia中查找的关键字。 |     `search`的值是用户提供的用于在Wikipedia中查找的关键字。 | ||||||
|     另外三个参数是固定值,分别是"opensearch"、"json"和"JSONP_CALLBACK"。 |     另外三个参数是固定值,分别是"opensearch"、"json"和"JSONP_CALLBACK"。 | ||||||
|   .l-sub-section |   .l-sub-section | ||||||
|     :marked |     :marked | ||||||
| @ -852,7 +852,7 @@ block wikipedia-jsonp+ | |||||||
|   :marked |   :marked | ||||||
|     In more parameterized examples we might prefer to build the query string with the Angular `URLSearchParams` helper as shown here: |     In more parameterized examples we might prefer to build the query string with the Angular `URLSearchParams` helper as shown here: | ||||||
|      |      | ||||||
|     在更为参数化的例子中,我们会首选Angular的`URLSearchParams`辅助类来构建查询字符串,就像这样: |     在更加参数化的例子中,我们会首选Angular的`URLSearchParams`辅助类来构建查询字符串,就像这样: | ||||||
|   +makeExample('server-communication/ts/app/wiki/wikipedia.service.ts','search-parameters','app/wiki/wikipedia.service.ts (search parameters)')(format=".") |   +makeExample('server-communication/ts/app/wiki/wikipedia.service.ts','search-parameters','app/wiki/wikipedia.service.ts (search parameters)')(format=".") | ||||||
|   :marked |   :marked | ||||||
|     This time we call `jsonp` with *two* arguments: the `wikiUrl` and an options object whose `search` property is the `params` object. |     This time we call `jsonp` with *two* arguments: the `wikiUrl` and an options object whose `search` property is the `params` object. | ||||||
| @ -990,7 +990,7 @@ block wikipedia-jsonp+ | |||||||
| 
 | 
 | ||||||
|     We're binding to the search box `keyup` event and calling the component's `search` method after each keystroke. |     We're binding to the search box `keyup` event and calling the component's `search` method after each keystroke. | ||||||
|      |      | ||||||
|     我们正在绑定到搜索框的`keyup`事件,并且在每次按键之后调用组件的`search`方法。 |     我们绑定到搜索框的`keyup`事件,并且在每次按键之后调用组件的`search`方法。 | ||||||
| 
 | 
 | ||||||
|     We turn these events into an observable stream of search terms using a `Subject`  |     We turn these events into an observable stream of search terms using a `Subject`  | ||||||
|     which we import from the RxJS observable library: |     which we import from the RxJS observable library: | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user