fix tutorial-toh-pt6.jade
This commit is contained in:
parent
2eedd15cd1
commit
f7a270e78a
|
@ -341,23 +341,40 @@ block get-heroes-details
|
||||||
以便调用者能把一个合适的错误信息显示给用户。
|
以便调用者能把一个合适的错误信息显示给用户。
|
||||||
|
|
||||||
### Get hero by id
|
### Get hero by id
|
||||||
|
|
||||||
|
### 通过id获取英雄
|
||||||
|
|
||||||
The `HeroDetailComponent` asks the `HeroService` to fetch a single hero to edit.
|
The `HeroDetailComponent` asks the `HeroService` to fetch a single hero to edit.
|
||||||
|
|
||||||
|
`HeroDetailComponent`通过`HeroService`来获取一个英雄进行编辑。
|
||||||
|
|
||||||
The `HeroService` currently fetches all heroes and then finds the desired hero
|
The `HeroService` currently fetches all heroes and then finds the desired hero
|
||||||
by filtering for the one with the matching `id`.
|
by filtering for the one with the matching `id`.
|
||||||
That's fine in a simulation. It's wasteful to ask a real server for _all_ heroes when we only want one.
|
That's fine in a simulation. It's wasteful to ask a real server for _all_ heroes when we only want one.
|
||||||
Most web APIs support a _get-by-id_ request in the form `api/hero/:id` (e.g., `api/hero/11`).
|
Most web APIs support a _get-by-id_ request in the form `api/hero/:id` (e.g., `api/hero/11`).
|
||||||
|
|
||||||
|
现有`HeroService`可以通过获取所有英雄,然后根据`id`来过滤出想要的英雄,对于例子来说这无可厚非,
|
||||||
|
但是若到真实服务的时候,这种为了获取一个英雄而请求全部英雄的做法就有点浪费了,
|
||||||
|
许多Web API支持_get-by-id_请求,形如:`api/hero/:id`(如:`api/hero/11`)。
|
||||||
|
|
||||||
Update the `HeroService.getHero` method to make a _get-by-id_ request,
|
Update the `HeroService.getHero` method to make a _get-by-id_ request,
|
||||||
applying what we just learned to write `getHeroes`:
|
applying what we just learned to write `getHeroes`:
|
||||||
|
|
||||||
|
使用我们刚刚编写`getHeroes`所学的方法,更新`HeroService.getHero`方法制作一个_get-by-id_请求:
|
||||||
|
|
||||||
+makeExcerpt('src/app/hero.service.ts', 'getHero', '')
|
+makeExcerpt('src/app/hero.service.ts', 'getHero', '')
|
||||||
:marked
|
:marked
|
||||||
It's almost the same as `getHeroes`.
|
It's almost the same as `getHeroes`.
|
||||||
The URL identifies _which_ hero the server should update by encoding the hero id into the URL
|
The URL identifies _which_ hero the server should update by encoding the hero id into the URL
|
||||||
to match the `api/hero/:id` pattern.
|
to match the `api/hero/:id` pattern.
|
||||||
|
|
||||||
|
此方法基本上与`getHeroes`方法一致,通过在URL中添加英雄的id来告诉服务器应该获取_那个_英雄,
|
||||||
|
匹配`api/hero/:id`模式。
|
||||||
|
|
||||||
We also adjust to the fact that the `data` in the response is a single hero object rather than !{_an} !{_array}.
|
We also adjust to the fact that the `data` in the response is a single hero object rather than !{_an} !{_array}.
|
||||||
|
|
||||||
|
我们还要调整响应返回的`data`为一个英雄对象,而不是一个对象数组。
|
||||||
|
|
||||||
### Unchanged _getHeroes_ API
|
### Unchanged _getHeroes_ API
|
||||||
|
|
||||||
### `getHeroes` API 没变
|
### `getHeroes` API 没变
|
||||||
|
@ -367,6 +384,10 @@ block get-heroes-details
|
||||||
We still return a !{_Promise} from both methods.
|
We still return a !{_Promise} from both methods.
|
||||||
We won't have to update any of the components that call them.
|
We won't have to update any of the components that call them.
|
||||||
|
|
||||||
|
尽管我们在`getHeroes()`和`getHero()`方法的*内部*做了重大改变,
|
||||||
|
但是他们的公共签名却没有变。这两个方法仍然返回的是一个!{Promise}对象,
|
||||||
|
所以并不需要更新任何调用他们的组件。
|
||||||
|
|
||||||
Our stakeholders are thrilled with the web API integration so far.
|
Our stakeholders are thrilled with the web API integration so far.
|
||||||
Now they want the ability to create and delete heroes.
|
Now they want the ability to create and delete heroes.
|
||||||
|
|
||||||
|
@ -654,9 +675,15 @@ block observables-section-intro
|
||||||
after chaining it to another RxJS operator, <code>map</code>,
|
after chaining it to another RxJS operator, <code>map</code>,
|
||||||
to extract heroes from the response data.
|
to extract heroes from the response data.
|
||||||
|
|
||||||
|
更重要的不同:我们不再调用`toPromise`方法,而是从`http.get`
|
||||||
|
方法中返回一个*Observable*对象,之后链式调用RxJS操作<code>map</code>
|
||||||
|
来从返回数据中提取英雄。
|
||||||
|
|
||||||
RxJS operator chaining makes response processing easy and readable.
|
RxJS operator chaining makes response processing easy and readable.
|
||||||
See the [discuss below about operators](#rxjs-imports).
|
See the [discuss below about operators](#rxjs-imports).
|
||||||
|
|
||||||
|
链式RxJS操作可以让我们简单、易读的处理响应数据。详见[下面关于操作符的讨论](#rxjs-imports)
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
### HeroSearchComponent
|
### HeroSearchComponent
|
||||||
|
|
||||||
|
@ -822,19 +849,29 @@ block observable-transformers
|
||||||
Most RxJS operators are not included in Angular's base `Observable` implementation.
|
Most RxJS operators are not included in Angular's base `Observable` implementation.
|
||||||
The base implementation includes only what Angular itself requires.
|
The base implementation includes only what Angular itself requires.
|
||||||
|
|
||||||
|
大部分RxJS操作符不包括在Angular的`Observable`基本实现中,基本实现中只包括了Angular本身所需的功能。
|
||||||
|
|
||||||
If we want more RxJS features, we have to extend `Observable` by *importing* the libraries in which they are defined.
|
If we want more RxJS features, we have to extend `Observable` by *importing* the libraries in which they are defined.
|
||||||
Here are all the RxJS imports _this_ component needs:
|
Here are all the RxJS imports _this_ component needs:
|
||||||
|
|
||||||
|
如果想要更多的RxJS功能,我们必须通过*导入*其所定义的库来扩展`Observable`对象,
|
||||||
|
以下是_这个_模块所需导入的所有RxJS操作:
|
||||||
|
|
||||||
+makeExample('src/app/hero-search.component.ts','rxjs-imports','src/app/hero-search.component.ts (rxjs imports)')(format='.')
|
+makeExample('src/app/hero-search.component.ts','rxjs-imports','src/app/hero-search.component.ts (rxjs imports)')(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The `import 'rxjs/add/...'` syntax may be unfamiliar.
|
The `import 'rxjs/add/...'` syntax may be unfamiliar.
|
||||||
It's missing the usual list of symbols between the braces: `{...}`.
|
It's missing the usual list of symbols between the braces: `{...}`.
|
||||||
|
|
||||||
|
你可能并不熟悉`import 'rxjs/add/...'`语法,缺少了括号之间的导入列表:`{...}`。
|
||||||
|
|
||||||
We don't need the operator symbols themselves.
|
We don't need the operator symbols themselves.
|
||||||
In each case, the mere act of importing the library
|
In each case, the mere act of importing the library
|
||||||
loads and executes the library's script file which, in turn, adds the operator to the `Observable` class.
|
loads and executes the library's script file which, in turn, adds the operator to the `Observable` class.
|
||||||
|
|
||||||
|
其实我们并不需要操作符本身,正常情况下,导入库不过是加载和执行库所对应的脚本文件,
|
||||||
|
然后依次将操作符作为方法添加到`Observable`类中。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
### Add the search component to the dashboard
|
### Add the search component to the dashboard
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue