a bit more translation for d-i.jade
This commit is contained in:
parent
e03faf373d
commit
338490a776
|
@ -690,27 +690,37 @@ a(id='useclass')
|
||||||
class to be created (`HeroService`) is also the provider's injection token.
|
class to be created (`HeroService`) is also the provider's injection token.
|
||||||
We wrote it in this long form to de-mystify the preferred short form.
|
We wrote it in this long form to de-mystify the preferred short form.
|
||||||
|
|
||||||
第一个provider是*无语法糖的*,几乎所有典型的provider拓展的形式
|
第一个provider是*无语法糖的*,是从典型的情况扩展的,一般被新建的类(`HeroService`)同时也是该provider的注入令牌。
|
||||||
|
我们使用长的形式来编写它来解释首选的短形式。
|
||||||
|
|
||||||
The second provider substitutes the `DateLoggerService` for the `LoggerService`.
|
The second provider substitutes the `DateLoggerService` for the `LoggerService`.
|
||||||
The `LoggerService` is already registered at the `AppComponent` level.
|
The `LoggerService` is already registered at the `AppComponent` level.
|
||||||
When _this component_ requests the `LoggerService`, it receives the `DateLoggerService` instead.
|
When _this component_ requests the `LoggerService`, it receives the `DateLoggerService` instead.
|
||||||
|
|
||||||
|
第二个provider使用`DateLoggerService`来满足`LoggerService`。该`LoggerService`在`AppComponent`级别已经被注册。当_这个组件_要求`LoggerService`的时候,取而代之,它得到的是`DateLoggerService`服务。
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
This component and its tree of child components receive the `DateLoggerService` instance.
|
This component and its tree of child components receive the `DateLoggerService` instance.
|
||||||
Components outside the tree continue to receive the original `LoggerService` instance.
|
Components outside the tree continue to receive the original `LoggerService` instance.
|
||||||
|
|
||||||
|
这个组件和它的子级组件树得到`DateLoggerService`实例。在这些组件之外的组件树得到的还是`LoggerService`实例。
|
||||||
:marked
|
:marked
|
||||||
The `DateLoggerService` inherits from `LoggerService`; it appends the current date/time to each message:
|
The `DateLoggerService` inherits from `LoggerService`; it appends the current date/time to each message:
|
||||||
|
|
||||||
|
`DateLoggerService`从`LoggerService`继承;它把当前的日期/时间附加到每条信息上。
|
||||||
+makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','date-logger-service','app/date-logger.service.ts')(format='.')
|
+makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','date-logger-service','app/date-logger.service.ts')(format='.')
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
a(id='useexisting')
|
a(id='useexisting')
|
||||||
:marked
|
:marked
|
||||||
#### useExisting - the *alias provider*
|
#### useExisting - the *alias provider*
|
||||||
|
#### useExisting - *别名provider*
|
||||||
|
|
||||||
The `useExisting` provider maps one token to another.
|
The `useExisting` provider maps one token to another.
|
||||||
In effect, the first token is an ***alias*** for the service associated with second token,
|
In effect, the first token is an ***alias*** for the service associated with second token,
|
||||||
creating ***two ways to access the same service object***.
|
creating ***two ways to access the same service object***.
|
||||||
|
|
||||||
|
使用`useExisting` provider来把一个令牌映射到另一个。实际上,第一个令牌是第二个令牌所对应的服务的一个***别名***,构成***对一个服务对象的两种访问方法***。
|
||||||
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-existing')
|
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-existing')
|
||||||
:marked
|
:marked
|
||||||
Narrowing an API through an aliasing interface is _one_ important use case for this technique.
|
Narrowing an API through an aliasing interface is _one_ important use case for this technique.
|
||||||
|
@ -718,15 +728,23 @@ a(id='useexisting')
|
||||||
Imagine that the `LoggerService` had a large API (it's actually only three methods and a property).
|
Imagine that the `LoggerService` had a large API (it's actually only three methods and a property).
|
||||||
We want to shrink that API surface to just the two members exposed by the `MinimalLogger` [*class-interface*](#class-interface):
|
We want to shrink that API surface to just the two members exposed by the `MinimalLogger` [*class-interface*](#class-interface):
|
||||||
|
|
||||||
|
通过使用别名接口,把一个API变窄,是_一个_很重要的该技术的使用例子。我们在这里就是为了这个目的使用了别名。
|
||||||
|
想象一下如果`LoggerService`有个很大的API(它其实只有三个方法,一个属性),我们通过使用`MinimalLogger`[*类-接口*](#class-interface)别名要把这个API界面缩小到只暴露两个成员:
|
||||||
|
|
||||||
+makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','minimal-logger','app/date-logger.service.ts (MinimalLogger)')(format='.')
|
+makeExample('cb-dependency-injection/ts/app/date-logger.service.ts','minimal-logger','app/date-logger.service.ts (MinimalLogger)')(format='.')
|
||||||
:marked
|
:marked
|
||||||
The constructor's `logger` parameter is typed as `MinimalLogger` so only its two members are visible in TypeScript:
|
The constructor's `logger` parameter is typed as `MinimalLogger` so only its two members are visible in TypeScript:
|
||||||
|
|
||||||
|
构造函数的`logger`参数是一个`MinimalLogger`类型,所有它只有两个成员在TypeScript里面可见:
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src="/resources/images/cookbooks/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger restricted API")
|
img(src="/resources/images/cookbooks/dependency-injection/minimal-logger-intellisense.png" alt="MinimalLogger restricted API")
|
||||||
:marked
|
:marked
|
||||||
Angular actually sets the `logger` parameter to the injector's full version of the `LoggerService`
|
Angular actually sets the `logger` parameter to the injector's full version of the `LoggerService`
|
||||||
which happens to be the `DateLoggerService` thanks to the override provider registered previously via `useClass`.
|
which happens to be the `DateLoggerService` thanks to the override provider registered previously via `useClass`.
|
||||||
The following image, which displays the logging date, confirms the point:
|
The following image, which displays the logging date, confirms the point:
|
||||||
|
|
||||||
|
Angular实际上设置`logger`参数给注入器里的`LoggerService`的完整版本,该完整版本被`DateLoggerService`所取代,多谢在之前provder注册里使用`useClass`。
|
||||||
|
在下面的图片中,显示了日志日期,确认了这点:
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src="/resources/images/cookbooks/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px")
|
img(src="/resources/images/cookbooks/dependency-injection/date-logger-entry.png" alt="DateLoggerService entry" width="300px")
|
||||||
|
|
||||||
|
@ -734,36 +752,53 @@ figure.image-display
|
||||||
a(id='usefactory')
|
a(id='usefactory')
|
||||||
:marked
|
:marked
|
||||||
#### useFactory - the *factory provider*
|
#### useFactory - the *factory provider*
|
||||||
|
#### useFactory - *factory provider*
|
||||||
|
|
||||||
The `useFactory` provider creates a dependency object by calling a factory function
|
The `useFactory` provider creates a dependency object by calling a factory function
|
||||||
as seen in this example.
|
as seen in this example.
|
||||||
|
|
||||||
|
`useFactory` provider通过调用一个在下例看到的factory函数来新建一个依赖对象。
|
||||||
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-factory')
|
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-factory')
|
||||||
:marked
|
:marked
|
||||||
Use this technique to ***create a dependency object***
|
Use this technique to ***create a dependency object***
|
||||||
with a factory function whose inputs are some ***combination of injected services and local state***.
|
with a factory function whose inputs are some ***combination of injected services and local state***.
|
||||||
|
|
||||||
|
使用这个技巧,利用一个包含了一些***依赖服务和本地状态***的输入的factory函数,来***建立一个依赖对象***。
|
||||||
|
|
||||||
The *dependency object* doesn't have to be a class instance. It could be anything.
|
The *dependency object* doesn't have to be a class instance. It could be anything.
|
||||||
In this example, the *dependency object* is a string of the names of the runners-up
|
In this example, the *dependency object* is a string of the names of the runners-up
|
||||||
to the "Hero of the Month" contest.
|
to the "Hero of the Month" contest.
|
||||||
|
|
||||||
|
该*依赖对象*不一定是一个类实例。它可以是任何东西。在这个例子里,*依赖对象*是一个字符串,代表了**本月英雄**比赛的亚军的名字。
|
||||||
|
|
||||||
The local state is the number `2`, the number of runners-up this component should show.
|
The local state is the number `2`, the number of runners-up this component should show.
|
||||||
We execute `runnersUpFactory` immediately with `2`.
|
We execute `runnersUpFactory` immediately with `2`.
|
||||||
|
|
||||||
|
本地状态是数字`2`,该组件应该显示的亚军的个数。我们立刻用`2`来执行`runnersUpFactory`。
|
||||||
|
|
||||||
The `runnersUpFactory` itself isn't the provider factory function.
|
The `runnersUpFactory` itself isn't the provider factory function.
|
||||||
The true provider factory function is the function that `runnersUpFactory` returns.
|
The true provider factory function is the function that `runnersUpFactory` returns.
|
||||||
|
|
||||||
|
`runnersUpFactory`自己provider factory函数。真正的provider factory函数是一个`runnersUpFactory`返回的函数。
|
||||||
|
|
||||||
+makeExample('cb-dependency-injection/ts/app/runners-up.ts','factory-synopsis','runners-up.ts (excerpt)')(format='.')
|
+makeExample('cb-dependency-injection/ts/app/runners-up.ts','factory-synopsis','runners-up.ts (excerpt)')(format='.')
|
||||||
:marked
|
:marked
|
||||||
That returned function takes a winning `Hero` and a `HeroService` as arguments.
|
That returned function takes a winning `Hero` and a `HeroService` as arguments.
|
||||||
|
|
||||||
|
这个返回的函数需要一个`Hero`和一个`HeroService`参数。
|
||||||
|
|
||||||
Angular supplies these arguments from injected values identified by
|
Angular supplies these arguments from injected values identified by
|
||||||
the two *tokens* in the `deps` array.
|
the two *tokens* in the `deps` array.
|
||||||
The two `deps` values are *tokens* that the injector uses
|
The two `deps` values are *tokens* that the injector uses
|
||||||
to provide these factory function dependencies.
|
to provide these factory function dependencies.
|
||||||
|
|
||||||
|
Angular通过注入值提供这些参数,这些值是从`deps`数组中使用两个*令牌*来提取的。这两个`deps`值是注入器使用*令牌*来提供的factory函数依赖。
|
||||||
|
|
||||||
After some undisclosed work, the function returns the string of names
|
After some undisclosed work, the function returns the string of names
|
||||||
and Angular injects it into the `runnersUp` parameter of the `HeroOfTheMonthComponent`.
|
and Angular injects it into the `runnersUp` parameter of the `HeroOfTheMonthComponent`.
|
||||||
|
|
||||||
|
一些没有公开的工作后,这个函数返回名字字符串,Angular将其注入到`HeroOfTheMonthComponent`组件的`runnersUp`参数里面。
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
The function retrieves candidate heroes from the `HeroService`,
|
The function retrieves candidate heroes from the `HeroService`,
|
||||||
|
@ -771,23 +806,32 @@ a(id='usefactory')
|
||||||
Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
|
Look at the [live example](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)
|
||||||
for the full source code.
|
for the full source code.
|
||||||
|
|
||||||
|
该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字合并起来。亲到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)看全部原代码。
|
||||||
|
|
||||||
|
|
||||||
a(id="tokens")
|
a(id="tokens")
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Provider token alternatives: the *class-interface* and *OpaqueToken*
|
## Provider token alternatives: the *class-interface* and *OpaqueToken*
|
||||||
|
## 可选Provider令牌:**类-接口*和*OpaqueToken*
|
||||||
|
|
||||||
Angular dependency injection is easiest when the provider *token* is a class
|
Angular dependency injection is easiest when the provider *token* is a class
|
||||||
that is also the type of the returned dependency object (what we usually call the *service*).
|
that is also the type of the returned dependency object (what we usually call the *service*).
|
||||||
|
|
||||||
|
Angular依赖注入在*令牌*为类,并且该类同时也是返回依赖的对象的时候最为容易(我们通常叫*服务*)。
|
||||||
|
|
||||||
But the token doesn't have to be a class and even when it is a class,
|
But the token doesn't have to be a class and even when it is a class,
|
||||||
it doesn't have to be the same type as the returned object.
|
it doesn't have to be the same type as the returned object.
|
||||||
That's the subject of our next section.
|
That's the subject of our next section.
|
||||||
|
|
||||||
|
但是令牌不一定非要是类,就算它是一个类,它也不一定非要是返回对象相同类型的类。这是我们下一节的课题。
|
||||||
|
|
||||||
<a id="class-interface"></a>
|
<a id="class-interface"></a>
|
||||||
### class-interface
|
### class-interface
|
||||||
|
### 类-接口
|
||||||
In the previous *Hero of the Month* example, we used the `MinimalLogger` class
|
In the previous *Hero of the Month* example, we used the `MinimalLogger` class
|
||||||
as the token for a provider of a `LoggerService`.
|
as the token for a provider of a `LoggerService`.
|
||||||
|
|
||||||
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-existing')
|
+makeExample('cb-dependency-injection/ts/app/hero-of-the-month.component.ts','use-existing')
|
||||||
:marked
|
:marked
|
||||||
The `MinimalLogger` is an abstract class.
|
The `MinimalLogger` is an abstract class.
|
||||||
|
|
Loading…
Reference in New Issue