开发指南-HTTP客户端 翻译了一小部分
This commit is contained in:
parent
cb756a5a05
commit
cba044f558
|
@ -201,51 +201,86 @@ figure.image-display
|
||||||
When the user clicks the button, we pass that value to the component's `addHero` method and then
|
When the user clicks the button, we pass that value to the component's `addHero` method and then
|
||||||
clear it to make it ready for a new hero name.
|
clear it to make it ready for a new hero name.
|
||||||
|
|
||||||
|
它使用`ngFor`来展现这个英雄列表。
|
||||||
|
列表的下方是一个输入框和一个*Add Hero*按钮,在那里,我们可以输入新英雄的名字,并把他们加到数据库中。
|
||||||
|
我们在`(click)`事件绑定中使用[模板引用变量](template-syntax.html#ref-vars)`NewHeroName`来访问这个输入框的值。
|
||||||
|
当用户点击此按钮时,我们把这个值传给组件的`addHero`方法,然后清除它,以备输入新英雄的名字。
|
||||||
|
|
||||||
Below the button is an area for an error message.
|
Below the button is an area for an error message.
|
||||||
|
|
||||||
|
按钮的下方是一个错误信息区。
|
||||||
|
|
||||||
a#oninit
|
a#oninit
|
||||||
a#HeroListComponent
|
a#HeroListComponent
|
||||||
:marked
|
:marked
|
||||||
## The *HeroListComponent* class
|
## The *HeroListComponent* class
|
||||||
|
## *HeroListComponent*类
|
||||||
Here's the component class:
|
Here's the component class:
|
||||||
|
|
||||||
|
下面是这个组件类:
|
||||||
+makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')
|
+makeExample('server-communication/ts/app/toh/hero-list.component.ts','component', 'app/toh/hero-list.component.ts (class)')
|
||||||
:marked
|
:marked
|
||||||
Angular [injects](dependency-injection.html) a `HeroService` into the constructor
|
Angular [injects](dependency-injection.html) a `HeroService` into the constructor
|
||||||
and the component calls that service to fetch and save data.
|
and the component calls that service to fetch and save data.
|
||||||
|
|
||||||
|
Angular会把一个`HeroService`[注入](dependency-injection.html)到组件的构造函数中,该组件将调用此服务来获取和保存数据。
|
||||||
|
|
||||||
The component **does not talk directly to the !{_Angular_Http} client**!
|
The component **does not talk directly to the !{_Angular_Http} client**!
|
||||||
The component doesn't know or care how we get the data.
|
The component doesn't know or care how we get the data.
|
||||||
It delegates to the `HeroService`.
|
It delegates to the `HeroService`.
|
||||||
|
|
||||||
|
这个组件**不会直接和!{_Angular_Http}客户端打交道**!
|
||||||
|
它既不知道也不关心我们如何获取数据,这些都被委托给了`HeroService`去做。
|
||||||
|
|
||||||
This is a golden rule: **always delegate data access to a supporting service class**.
|
This is a golden rule: **always delegate data access to a supporting service class**.
|
||||||
|
|
||||||
|
这是一条“黄金法则”:**总是把数据访问工作委托给一个提供支持的服务类**。
|
||||||
|
|
||||||
Although _at runtime_ the component requests heroes immediately after creation,
|
Although _at runtime_ the component requests heroes immediately after creation,
|
||||||
we do **not** call the service's `get` method in the component's constructor.
|
we do **not** call the service's `get` method in the component's constructor.
|
||||||
We call it inside the `ngOnInit` [lifecycle hook](lifecycle-hooks.html) instead
|
We call it inside the `ngOnInit` [lifecycle hook](lifecycle-hooks.html) instead
|
||||||
and count on Angular to call `ngOnInit` when it instantiates this component.
|
and count on Angular to call `ngOnInit` when it instantiates this component.
|
||||||
|
|
||||||
|
虽然_在运行期间_,组件会在创建之后立刻请求这些英雄数据,但我们**不会**在组件的构造函数中调用此服务的`get`方法。
|
||||||
|
而是在`ngOnInit`[生命周期钩子](lifecycle-hooks.html)中调用它,Angular会在初始化该组件时调用`ngOnInit`方法。
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
This is a *best practice*.
|
This is a *best practice*.
|
||||||
Components are easier to test and debug when their constructors are simple and all real work
|
Components are easier to test and debug when their constructors are simple and all real work
|
||||||
(especially calling a remote server) is handled in a separate method.
|
(especially calling a remote server) is handled in a separate method.
|
||||||
|
|
||||||
|
这是一项*最佳实践*。
|
||||||
|
当组件的构造函数足够简单,而且所有真实的工作(尤其是调用远端服务器)都在一个独立的方法中处理时,组件会更加容易测试和调试。
|
||||||
block getheroes-and-addhero
|
block getheroes-and-addhero
|
||||||
:marked
|
:marked
|
||||||
The service's `getHeroes()` and `addHero()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
|
The service's `getHeroes()` and `addHero()` methods return an `Observable` of hero data that the !{_Angular_Http} client fetched from the server.
|
||||||
|
|
||||||
|
服务的`getHeroes()`和`addHero()`方法返回一个英雄数据的可观察对象(`Observable`),这些数据是由!{_Angular_Http}从服务器上获取的。
|
||||||
|
|
||||||
*Observables* are a big topic, beyond the scope of this chapter.
|
*Observables* are a big topic, beyond the scope of this chapter.
|
||||||
But we need to know a little about them to appreciate what is going on here.
|
But we need to know a little about them to appreciate what is going on here.
|
||||||
|
|
||||||
|
*可观察对象(Observable)*是一个很大的主题,远超本章所能覆盖的范围之外。
|
||||||
|
但我们还是要了解它们一点儿,这样才能理解它在本章中做的那些工作。
|
||||||
|
|
||||||
We should think of an `Observable` as a stream of events published by some source.
|
We should think of an `Observable` as a stream of events published by some source.
|
||||||
We listen for events in this stream by ***subscribing*** to the `Observable`.
|
We listen for events in this stream by ***subscribing*** to the `Observable`.
|
||||||
In these subscriptions we specify the actions to take when the web request
|
In these subscriptions we specify the actions to take when the web request
|
||||||
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`来监听这个流中的那些事件。
|
||||||
|
在这些订阅中,我们指定了当Web请求生成了一个成功事件(有效载荷是英雄数据)或失败事件(有效载荷是错误对象)时该如何采取行动。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
With our basic intuitions about the component squared away, we're ready to look inside the `HeroService`.
|
With our basic intuitions about the component squared away, we're ready to look inside the `HeroService`.
|
||||||
|
|
||||||
|
关于组件的浅显讲解已经结束了,我们准备到`HeroService`的内部实现中看看。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
a#HeroService
|
a#HeroService
|
||||||
h2#fetch-data Fetch data with the #[b HeroService]
|
h2#fetch-data Fetch data with the #[b HeroService]
|
||||||
|
h2#fetch-data 通过#[b HeroService]获取数据
|
||||||
:marked
|
:marked
|
||||||
In many of our previous samples we faked the interaction with the server by
|
In many of our previous samples we faked the interaction with the server by
|
||||||
returning mock heroes in a service like this one:
|
returning mock heroes in a service like this one:
|
||||||
|
|
Loading…
Reference in New Issue