a bit more translation for d-i.jade

This commit is contained in:
Rex 2016-04-28 16:40:09 +01:00
parent e03faf373d
commit 338490a776
1 changed files with 45 additions and 1 deletions

View File

@ -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.