合并了官方的最新更新
This commit is contained in:
parent
d034bc33c8
commit
251d4ffe6c
|
@ -11,7 +11,7 @@ a(id="top")
|
||||||
:marked
|
:marked
|
||||||
**See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**.
|
**See the Angular 2 syntax in this <live-example name="cb-a1-a2-quick-reference"></live-example>**.
|
||||||
|
|
||||||
**可到[在线范例](/resources/live-examples/cb-a1-a2-quick-reference/ts/plnkr.html)中查看Angular 2语法**。
|
**可到<live-example name="cb-a1-a2-quick-reference"></live-example>中查看Angular 2语法**。
|
||||||
|
|
||||||
## Contents
|
## Contents
|
||||||
|
|
||||||
|
|
|
@ -116,7 +116,7 @@ include ../_util-fns
|
||||||
**See the <live-example name="cb-dependency-injection"></live-example>**
|
**See the <live-example name="cb-dependency-injection"></live-example>**
|
||||||
of the code supporting this cookbook.
|
of the code supporting this cookbook.
|
||||||
|
|
||||||
要获取本“烹饪宝典”的代码,**参见[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)**。
|
要获取本“烹饪宝典”的代码,**参见<live-example name="cb-dependency-injection"></live-example>**。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
|
||||||
|
@ -927,7 +927,7 @@ a(id='usefactory')
|
||||||
Look at the <live-example name="cb-dependency-injection"></live-example>
|
Look at the <live-example name="cb-dependency-injection"></live-example>
|
||||||
for the full source code.
|
for the full source code.
|
||||||
|
|
||||||
该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字拼接起来。请到[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)查看全部原代码。
|
该函数从`HeroService`获取英雄参赛者,从中取`2`个作为亚军,并把他们的名字拼接起来。请到<live-example name="cb-dependency-injection"></live-example>查看全部原代码。
|
||||||
|
|
||||||
a(id="tokens")
|
a(id="tokens")
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
@ -1200,7 +1200,7 @@ a(id='alex')
|
||||||
the <live-example name="cb-dependency-injection"></live-example>
|
the <live-example name="cb-dependency-injection"></live-example>
|
||||||
confirms that the `alex` parameter is set.
|
confirms that the `alex` parameter is set.
|
||||||
|
|
||||||
安全起见,我们添加了[@Optional](#optional)装饰器,但是[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)显示`alex`参数确实被设置了。
|
安全起见,我们添加了[@Optional](#optional)装饰器,但是<live-example name="cb-dependency-injection"></live-example>显示`alex`参数确实被设置了。
|
||||||
|
|
||||||
<a id="base-parent"></a>
|
<a id="base-parent"></a>
|
||||||
|
|
||||||
|
@ -1257,7 +1257,7 @@ a(id='alex')
|
||||||
confirms that the `alex` parameter is null.
|
confirms that the `alex` parameter is null.
|
||||||
*We cannot inject a parent by its base class.*
|
*We cannot inject a parent by its base class.*
|
||||||
|
|
||||||
可惜这样不行。[在线例子](/resources/live-examples/cb-dependency-injection/ts/plnkr.html)显示`alex`参数是null。
|
可惜这样不行。<live-example name="cb-dependency-injection"></live-example>显示`alex`参数是null。
|
||||||
*不能通过基类注入父组件*。
|
*不能通过基类注入父组件*。
|
||||||
|
|
||||||
<a id="class-interface-parent"></a>
|
<a id="class-interface-parent"></a>
|
||||||
|
|
|
@ -385,7 +385,7 @@ include _util-fns
|
||||||
Angular makes similar requests internally during many of its operations
|
Angular makes similar requests internally during many of its operations
|
||||||
as when it creates a [`Component`](#component) for display.
|
as when it creates a [`Component`](#component) for display.
|
||||||
|
|
||||||
Angular在创建[组件(Component)](#AppComponent)以供显示的过程中,会在内部执行很多类似的依赖注入请求。
|
Angular在创建[组件(Component)](#component)以供显示的过程中,会在内部执行很多类似的依赖注入请求。
|
||||||
|
|
||||||
The `Injector` maintains an internal map of tokens to dependency values.
|
The `Injector` maintains an internal map of tokens to dependency values.
|
||||||
If the `Injector` can't find a value for a given token, it creates
|
If the `Injector` can't find a value for a given token, it creates
|
||||||
|
|
|
@ -79,7 +79,7 @@ include ../_util-fns
|
||||||
:marked
|
:marked
|
||||||
The examples referenced in this chapter are available as a <live-example></live-example>.
|
The examples referenced in this chapter are available as a <live-example></live-example>.
|
||||||
|
|
||||||
本章中引用的这个例子可以到[在线例子](/resources/live-examples/animations/ts/plnkr.html)去体验。
|
本章中引用的这个例子可以到<live-example></live-example>去体验。
|
||||||
|
|
||||||
a(id="example-transitioning-between-states")
|
a(id="example-transitioning-between-states")
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
|
|
@ -212,7 +212,8 @@ block angular-library-modules
|
||||||
`!{_at_angular}/http`</span> and `!{_at_angular}/router`.
|
`!{_at_angular}/http`</span> and `!{_at_angular}/router`.
|
||||||
We import what we need from an Angular !{_library_module}.
|
We import what we need from an Angular !{_library_module}.
|
||||||
|
|
||||||
还有另一些重要的Angular模块库,比如`@angular/common`、`@angular/router` 和 `@angular/http`。我们从一个Angular的!{_library_module}导入我们需要的模块。
|
还有另一些重要的Angular模块库,比如`@angular/common`<span if-docs="ts">、和 `@angular/http`</span>和`@angular/router`。
|
||||||
|
我们从一个Angular的!{_library_module}导入我们需要的模块。
|
||||||
|
|
||||||
block angular-imports
|
block angular-imports
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -190,7 +190,7 @@ block example-links
|
||||||
Look for a link to a running version of that sample near the top of each page,
|
Look for a link to a running version of that sample near the top of each page,
|
||||||
such as this <live-example></live-example> from the [Architecture](architecture.html) chapter.
|
such as this <live-example></live-example> from the [Architecture](architecture.html) chapter.
|
||||||
|
|
||||||
在每页靠近顶部的地方都可以看到一个链接,指向这个范例的可执行版本,比如[架构](architecture.html)一章中的[在线例子](/resources/live-examples/architecture/ts/plnkr.html)。
|
在每页靠近顶部的地方都可以看到一个链接,指向这个范例的可执行版本,比如[架构](architecture.html)一章中的<live-example></live-example>。
|
||||||
|
|
||||||
The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
|
The link launches a browser-based code editor where we can inspect, modify, save, and download the code.
|
||||||
|
|
||||||
|
|
|
@ -339,6 +339,9 @@ code-example(format="", language="html").
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
### Router State
|
### Router State
|
||||||
|
|
||||||
|
### 路由器状态
|
||||||
|
|
||||||
After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute`s,
|
After the end of each successful navigation lifecycle, the router builds a tree of `ActivatedRoute`s,
|
||||||
which make up the current state of the router. We can access the current `RouterState` from anywhere in our
|
which make up the current state of the router. We can access the current `RouterState` from anywhere in our
|
||||||
application using the `Router` service and the `routerState` property.
|
application using the `Router` service and the `routerState` property.
|
||||||
|
@ -527,7 +530,13 @@ table
|
||||||
We discuss code and design decisions pertinent to routing and application design.
|
We discuss code and design decisions pertinent to routing and application design.
|
||||||
We gloss over everything in between.
|
We gloss over everything in between.
|
||||||
|
|
||||||
|
虽然我们会渐进式的前进到最终的范例应用,但本章并不是一个教程。
|
||||||
|
我们讨论路由和应用设计有关的代码和设计决策,并在这期间,处理遇到的所有问题。
|
||||||
|
|
||||||
The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html).
|
The full source is available in the [live example](/resources/live-examples/router/ts/plnkr.html).
|
||||||
|
|
||||||
|
完整代码可以在[在线例子](/resources/live-examples/router/ts/plnkr.html)中找到。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Our client is the Hero Employment Agency.
|
Our client is the Hero Employment Agency.
|
||||||
Heroes need work and The Agency finds Crises for them to solve.
|
Heroes need work and The Agency finds Crises for them to solve.
|
||||||
|
@ -545,6 +554,8 @@ table
|
||||||
|
|
||||||
1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
|
1. A *Heroes* area where we maintain the list of heroes employed by The Agency.
|
||||||
|
|
||||||
|
1. 一个*英雄*区,用来维护该中心雇佣英雄的列表。
|
||||||
|
|
||||||
Run the [live example](/resources/live-examples/router/ts/plnkr.html).
|
Run the [live example](/resources/live-examples/router/ts/plnkr.html).
|
||||||
It opens in the *Crisis Center*. We'll come back to that.
|
It opens in the *Crisis Center*. We'll come back to that.
|
||||||
|
|
||||||
|
@ -2746,7 +2757,7 @@ code-example(format="." language="bash").
|
||||||
row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
|
row because it demonstrates the final state of the application which includes the steps we're *about* to cover.
|
||||||
At the moment we're describing the state of affairs *prior* to those steps.
|
At the moment we're describing the state of affairs *prior* to those steps.
|
||||||
|
|
||||||
[在线例子](/resources/live-examples/router/ts/plnkr.html)*会*高亮显示选中的行,因为它显示的是应用中的最终状态,它包括一些我们*即将*涉及的步骤。接下来,我们就来讲讲这些中间步骤。
|
<live-example></live-example>*会*高亮显示选中的行,因为它显示的是应用中的最终状态,包括一些*即将*涉及的步骤。接下来,我们就来讲讲这些中间步骤。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them.
|
The `HeroListComponent` isn't expecting any parameters at all and wouldn't know what to do with them.
|
||||||
|
@ -2904,7 +2915,7 @@ figure.image-display
|
||||||
Please visit the <live-example></live-example> and
|
Please visit the <live-example></live-example> and
|
||||||
where you can download the final source code.
|
where you can download the final source code.
|
||||||
|
|
||||||
本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问[在线例子](/resources/live-examples/router/ts/plnkr.html),在那里你可以下载最终的源码。
|
本章中涉及到了很多背景知识,而且本应用程序也太大了,所以没法在这里显示。请访问<live-example></live-example>,在那里你可以下载最终的源码。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
|
|
||||||
|
|
|
@ -440,7 +440,7 @@ block hero-detail-comp-updates
|
||||||
:marked
|
:marked
|
||||||
In order to differentiate between add and edit we are adding a check to see if an id is passed in the URL. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
|
In order to differentiate between add and edit we are adding a check to see if an id is passed in the URL. If the id is absent we bind `HeroDetailComponent` to an empty `Hero` object. In either case, any edits made through the UI will be bound back to the same `hero` property.
|
||||||
|
|
||||||
为了区分添加和编辑操作,我们增加了一步检查,看看url中是否传入了id。如果没有id,我们就把`HeroDetailComponent`绑定到一个空的`Hero`对象。
|
为了区分添加和编辑操作,我们增加了一步检查,看看URL中是否传入了id。如果没有id,我们就把`HeroDetailComponent`绑定到一个空的`Hero`对象。
|
||||||
无论是哪种情况,通过UI进行的任何编辑操作都会被绑定回同一个`hero`属性。
|
无论是哪种情况,通过UI进行的任何编辑操作都会被绑定回同一个`hero`属性。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -672,7 +672,7 @@ block observables-section-intro
|
||||||
As the user types a name into a search box, we'll make repeated HTTP requests for heroes filtered by that name.
|
As the user types a name into a search box, we'll make repeated HTTP requests for heroes filtered by that name.
|
||||||
|
|
||||||
我们要为《英雄指南》添加一个*英雄搜索*特性。
|
我们要为《英雄指南》添加一个*英雄搜索*特性。
|
||||||
当用户在搜索框中输入一个名字时,我们将不断发起http请求,以获得按名字过滤的英雄。
|
当用户在搜索框中输入一个名字时,我们将不断发起HTTP请求,以获得按名字过滤的英雄。
|
||||||
|
|
||||||
We start by creating `HeroSearchService` that sends search queries to our server's web api.
|
We start by creating `HeroSearchService` that sends search queries to our server's web api.
|
||||||
|
|
||||||
|
@ -724,7 +724,7 @@ block observables-section-intro
|
||||||
The `async` pipe subscribes to the `!{_Observable}` and produces the !{_array} of heroes to `*ngFor`.
|
The `async` pipe subscribes to the `!{_Observable}` and produces the !{_array} of heroes to `*ngFor`.
|
||||||
|
|
||||||
但是,接下来我们看到`heroes`属性现在是英雄列表的`Observable`对象,而不再只是英雄数组。
|
但是,接下来我们看到`heroes`属性现在是英雄列表的`Observable`对象,而不再只是英雄数组。
|
||||||
`*ngFor`不能利用可观察对象做任何事,除非我们在它后面跟一个`async` pipe (`AsyncPipe`)。
|
`*ngFor`不能用可观察对象做任何事,除非我们在它后面跟一个`async` pipe (`AsyncPipe`)。
|
||||||
这个`async`管道会订阅到这个可观察对象,并且为`*ngFor`生成一个英雄数组。
|
这个`async`管道会订阅到这个可观察对象,并且为`*ngFor`生成一个英雄数组。
|
||||||
|
|
||||||
Time to create the `HeroSearchComponent` class and metadata.
|
Time to create the `HeroSearchComponent` class and metadata.
|
||||||
|
|
Loading…
Reference in New Issue