fix few compiling errors(live examples)
This commit is contained in:
parent
4578087fa5
commit
23984f8caf
|
@ -1,12 +1,12 @@
|
||||||
header(class="background-sky l-relative")
|
header(class="background-sky l-relative")
|
||||||
|
|
||||||
.hero.background-superhero-paper.is-large
|
.hero.background-superhero-paper.is-large
|
||||||
img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
|
img(class="hero-logo" src='/resources/images/logos/angular2/angular.svg')
|
||||||
h1.text-headline #{title}<br>#{subtitle}
|
h1.text-headline #{title}<br>#{subtitle}
|
||||||
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧!
|
a(href="/docs/ts/latest/quickstart.html" class="hero-cta md-raised button button-large button-plain" md-button) 开始吧!
|
||||||
|
|
||||||
announcement-bar
|
announcement-bar
|
||||||
.announcement-bar-slide.clearfix
|
.announcement-bar-slide.clearfix
|
||||||
img(src="/resources/images/logos/anglebrackets/devintersection.png" width="64")
|
img(src="/resources/images/logos/anglebrackets/devintersection.png" width="64")
|
||||||
p 参加11月14-16号的<strong>DEVintersection Amsterdam</strong>!
|
p 参加11月14-16号的<strong>DEVintersection Amsterdam</strong>!
|
||||||
a(href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button") Register now
|
a(href="https://www.devintersectioneurope.com/#!/" target="_blank" class="button md-button") 立即注册!
|
||||||
|
|
|
@ -84,7 +84,7 @@ figure
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
p The code referenced on this page is available as a <live-example></live-example>.
|
p The code referenced on this page is available as a <live-example></live-example>.
|
||||||
|
|
||||||
p 本章所引用的代码可以从这个#[+liveExampleLink2('在线例子')]。
|
p 本章所引用的代码可以从这个<live-example>在线例子</live-example>。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
|
|
@ -148,7 +148,7 @@ block includes
|
||||||
当我们点击按钮的时候,显示的日志会在"**<samp>04/15/1988</samp>**"和"**<samp>Friday, April 15, 1988</samp>**"之间切换。
|
当我们点击按钮的时候,显示的日志会在"**<samp>04/15/1988</samp>**"和"**<samp>Friday, April 15, 1988</samp>**"之间切换。
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle")
|
img(src='/resources/images/devguide/pipes/date-format-toggle-anim.gif' alt="Date Format Toggle")
|
||||||
:marked
|
:marked
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
|
@ -243,7 +243,7 @@ figure.image-display
|
||||||
现在,我们需要一个组件来演示这个管道。
|
现在,我们需要一个组件来演示这个管道。
|
||||||
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.')
|
+makeExample('pipes/ts/app/power-booster.component.ts',null,'app/power-booster.component.ts')(format='.')
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")
|
img(src='/resources/images/devguide/pipes/power-booster.png' alt="Power Booster")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Two things to note:
|
Two things to note:
|
||||||
|
@ -261,7 +261,7 @@ figure.image-display
|
||||||
header Remember the declarations #{_array}!
|
header Remember the declarations #{_array}!
|
||||||
|
|
||||||
header 别忘了declarations数组!
|
header 别忘了declarations数组!
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Angular reports an error if we neglect to list our custom pipe.
|
Angular reports an error if we neglect to list our custom pipe.
|
||||||
We didn't list the `DatePipe` in our previous example because all
|
We didn't list the `DatePipe` in our previous example because all
|
||||||
|
@ -292,7 +292,7 @@ figure.image-display
|
||||||
+makeExample('pipes/ts/app/power-boost-calculator.component.ts', null, '/app/power-boost-calculator.component.ts')(format='.')
|
+makeExample('pipes/ts/app/power-boost-calculator.component.ts', null, '/app/power-boost-calculator.component.ts')(format='.')
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator")
|
img(src='/resources/images/devguide/pipes/power-boost-calculator-anim.gif' alt="Power Boost Calculator")
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
a#change-detection
|
a#change-detection
|
||||||
|
@ -392,7 +392,7 @@ a#change-detection
|
||||||
这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码,来帮我们体验这些效果。
|
这个*飞行英雄*的例子用检查框和其它显示内容扩展了原有代码,来帮我们体验这些效果。
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/pipes/flying-heroes-anim.gif' alt="Flying Heroes")
|
img(src='/resources/images/devguide/pipes/flying-heroes-anim.gif' alt="Flying Heroes")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Replacing the #{_array} is an efficient way to signal to Angular that it should update the display.
|
Replacing the #{_array} is an efficient way to signal to Angular that it should update the display.
|
||||||
|
@ -510,9 +510,9 @@ block pure-change
|
||||||
我们把`FlyingHeroesPipe`换成了`FlyingHeroesImpurePipe`。
|
我们把`FlyingHeroesPipe`换成了`FlyingHeroesImpurePipe`。
|
||||||
下面是完整的实现:
|
下面是完整的实现:
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts',
|
'pipes/ts/app/flying-heroes.pipe.ts, pipes/ts/app/flying-heroes.pipe.ts',
|
||||||
'impure, pure',
|
'impure, pure',
|
||||||
'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.')
|
'FlyingHeroesImpurePipe, FlyingHeroesPipe')(format='.')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally.
|
We inherit from `FlyingHeroesPipe` to prove the point that nothing changed internally.
|
||||||
|
@ -541,7 +541,7 @@ block pure-change
|
||||||
|
|
||||||
p.
|
p.
|
||||||
唯一的重大改动就是管道。
|
唯一的重大改动就是管道。
|
||||||
我们可以在#[+liveExampleLink('在线例子')]中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
|
我们可以在<live-example>在线例子</live-example>中确认,当我们输入新的英雄甚至修改#[code heroes]数组时,这个#[i 会飞的英雄]的显示也跟着更新了。
|
||||||
|
|
||||||
- var _dollar = _docsFor === 'ts' ? '$' : '';
|
- var _dollar = _docsFor === 'ts' ? '$' : '';
|
||||||
h3#async-pipe The impure #[i AsyncPipe]
|
h3#async-pipe The impure #[i AsyncPipe]
|
||||||
|
@ -626,7 +626,7 @@ h3#async-pipe 非纯管道#[i AsyncPipe]
|
||||||
组件渲染起来是这样的:
|
组件渲染起来是这样的:
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/pipes/hero-list.png' alt="Hero List")
|
img(src='/resources/images/devguide/pipes/hero-list.png' alt="Hero List")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
### *JsonPipe*
|
### *JsonPipe*
|
||||||
|
@ -741,8 +741,8 @@ a(id="no-filter-pipe")
|
||||||
|
|
||||||
虽然不是很明显,但代码最小化方面也存在风险。想象一个用于英雄列表的排序管道。我们可能根据英雄原始属性中的`name`和`planet`进行排序,就像这样:
|
虽然不是很明显,但代码最小化方面也存在风险。想象一个用于英雄列表的排序管道。我们可能根据英雄原始属性中的`name`和`planet`进行排序,就像这样:
|
||||||
code-example(language="html")
|
code-example(language="html")
|
||||||
<!-- NOT REAL CODE! -->
|
<!-- NOT REAL CODE! -->
|
||||||
<div *ngFor="let hero of heroes | orderBy:'name,planet'"></div>
|
<div *ngFor="let hero of heroes | orderBy:'name,planet'"></div>
|
||||||
:marked
|
:marked
|
||||||
We identify the sort fields by text strings, expecting the pipe to reference a property value by indexing
|
We identify the sort fields by text strings, expecting the pipe to reference a property value by indexing
|
||||||
(e.g., `hero['name']`).
|
(e.g., `hero['name']`).
|
||||||
|
|
|
@ -68,7 +68,7 @@ block includes
|
||||||
The <live-example></live-example>
|
The <live-example></live-example>
|
||||||
demonstrates all of the syntax and code snippets described in this chapter.
|
demonstrates all of the syntax and code snippets described in this chapter.
|
||||||
p.
|
p.
|
||||||
这个#[+liveExampleLink2('在线例子')]演示了本章中描述的所有语法和代码片段。
|
这个<live-example>在线例子</live-example>演示了本章中描述的所有语法和代码片段。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -1034,7 +1034,7 @@ figure.image-display
|
||||||
We can set the value of an attribute directly with an **attribute binding**.
|
We can set the value of an attribute directly with an **attribute binding**.
|
||||||
|
|
||||||
我们可以通过**Attribute绑定**来直接设置Attribute的值。
|
我们可以通过**Attribute绑定**来直接设置Attribute的值。
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.
|
This is the only exception to the rule that a binding sets a target property. This is the only binding that creates and sets an attribute.
|
||||||
|
@ -1235,7 +1235,7 @@ block style-property-name-dart-diff
|
||||||
|
|
||||||
事件绑定语法由等号左侧带圆括号的**目标事件**,和右侧一个引号中的[模板语句](#template-statements)组成。
|
事件绑定语法由等号左侧带圆括号的**目标事件**,和右侧一个引号中的[模板语句](#template-statements)组成。
|
||||||
下列事件绑定监听按钮的点击事件。无论什么时候,发生点击时,都会调用组件的`onSave()`方法。
|
下列事件绑定监听按钮的点击事件。无论什么时候,发生点击时,都会调用组件的`onSave()`方法。
|
||||||
|
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -1247,7 +1247,7 @@ block style-property-name-dart-diff
|
||||||
identifies the target event. In the following example, the target is the button’s click event.
|
identifies the target event. In the following example, the target is the button’s click event.
|
||||||
|
|
||||||
**圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中,目标是按钮的click事件。
|
**圆括号中的名称** —— 比如`(click)` —— 标记出了目标事件。在下面这个例子中,目标是按钮的click事件。
|
||||||
|
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-1')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Some people prefer the `on-` prefix alternative, known as the **canonical form**:
|
Some people prefer the `on-` prefix alternative, known as the **canonical form**:
|
||||||
|
@ -1389,29 +1389,29 @@ block style-property-name-dart-diff
|
||||||
这都是好事。
|
这都是好事。
|
||||||
|
|
||||||
//
|
//
|
||||||
:marked
|
:marked
|
||||||
### Event bubbling and propagation [TODO: reinstate this section when it becomes true]
|
### Event bubbling and propagation [TODO: reinstate this section when it becomes true]
|
||||||
Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements.
|
Angular invokes the event-handling statement if the event is raised by the current element or one of its child elements.
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-bubbling')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Many DOM events, both [native](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers ) and [custom](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events ), bubble up their ancestor tree of DOM elements until an event handler along the way prevents further propagation.
|
Many DOM events, both [native](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers ) and [custom](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events ), bubble up their ancestor tree of DOM elements until an event handler along the way prevents further propagation.
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
`EventEmitter` events don’t bubble.
|
`EventEmitter` events don’t bubble.
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
The result of an event binding statement determines whether
|
The result of an event binding statement determines whether
|
||||||
[event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation)
|
[event propagation](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Examples#Example_5:_Event_Propagation)
|
||||||
continues or stops with the current element.
|
continues or stops with the current element.
|
||||||
|
|
||||||
Event propagation stops if the binding statement returns a falsey value (as does a method with no return value).
|
Event propagation stops if the binding statement returns a falsey value (as does a method with no return value).
|
||||||
Clicking the button in the next example triggers a save;
|
Clicking the button in the next example triggers a save;
|
||||||
the click doesn't make it to the outer `<div>` so the div's save handler is not called.
|
the click doesn't make it to the outer `<div>` so the div's save handler is not called.
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-no-propagation')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-no-propagation')(format=".")
|
||||||
:marked
|
:marked
|
||||||
Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button
|
Propagation continues if the statement returns a truthy value. In the next example, the click is heard by both the button
|
||||||
and the outer `<div>`, causing a double save.
|
and the outer `<div>`, causing a double save.
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'event-binding-propagation')(format=".")
|
||||||
|
|
||||||
#two-way
|
#two-way
|
||||||
|
@ -1557,7 +1557,7 @@ a#ngModel
|
||||||
|
|
||||||
下面是实际操作中的所有变体形式,包括这个大写版本:
|
下面是实际操作中的所有变体形式,包括这个大写版本:
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
|
img(src='/resources/images/devguide/template-syntax/ng-model-anim.gif' alt="NgModel variations")
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -1871,9 +1871,9 @@ block dart-no-truthy-falsey
|
||||||
|
|
||||||
.alert.is-critical
|
.alert.is-critical
|
||||||
:marked
|
:marked
|
||||||
A template input variable is **not** the same as a [template reference variable](#ref-vars)!
|
A template input variable is **not** the same as a [template reference variable](#ref-vars)!
|
||||||
|
|
||||||
模板输入变量和[模板引用变量](#ref-vars)**不是**一回事!
|
模板输入变量和[模板引用变量](#ref-vars)**不是**一回事!
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We use this variable within the template to access a hero’s properties,
|
We use this variable within the template to access a hero’s properties,
|
||||||
|
@ -1935,7 +1935,7 @@ block dart-no-truthy-falsey
|
||||||
Now set the `NgForTrackBy` directive to that *tracking* function.
|
Now set the `NgForTrackBy` directive to that *tracking* function.
|
||||||
|
|
||||||
现在,把`NgForTrackBy`指令设置为那个*追踪*函数。
|
现在,把`NgForTrackBy`指令设置为那个*追踪*函数。
|
||||||
|
|
||||||
+makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".")
|
+makeExample('template-syntax/ts/app/app.component.html', 'NgForTrackBy-2')(format=".")
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -2055,9 +2055,9 @@ block remember-the-brackets
|
||||||
|
|
||||||
上面这种情况下,它管理两组`NgSwitchCase`和`NgSwitchDefault`指令,一次是(*)前缀的版本,一次是展开模板后的版本。
|
上面这种情况下,它管理两组`NgSwitchCase`和`NgSwitchDefault`指令,一次是(*)前缀的版本,一次是展开模板后的版本。
|
||||||
我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的:
|
我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的:
|
||||||
|
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
|
img(src='/resources/images/devguide/template-syntax/ng-switch-anim.gif' alt="NgSwitch")
|
||||||
:marked
|
:marked
|
||||||
### Expanding `*ngFor`
|
### Expanding `*ngFor`
|
||||||
### 展开`*ngFor`
|
### 展开`*ngFor`
|
||||||
|
@ -2297,7 +2297,7 @@ figure.image-display
|
||||||
|
|
||||||
_输入_和_输出_这两个词是从目标指令的视角来说的。
|
_输入_和_输出_这两个词是从目标指令的视角来说的。
|
||||||
figure.image-display
|
figure.image-display
|
||||||
img(src='/resources/images/devguide/template-syntax/input-output.png' alt="输入和输出")
|
img(src='/resources/images/devguide/template-syntax/input-output.png' alt="输入和输出")
|
||||||
:marked
|
:marked
|
||||||
`HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
|
`HeroDetailComponent.hero` is an **input** property from the perspective of `HeroDetailComponent`
|
||||||
because data flows *into* that property from a template binding expression.
|
because data flows *into* that property from a template binding expression.
|
||||||
|
|
|
@ -29,7 +29,7 @@ block includes
|
||||||
|
|
||||||
Run the <live-example></live-example> for this part.
|
Run the <live-example></live-example> for this part.
|
||||||
|
|
||||||
p 运行这部分的#[+liveExampleLink2('在线例子', 'toh-6')]。
|
p 运行这部分的<live-example>在线例子</live-example>。
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
|
@ -140,7 +140,7 @@ block http-providers
|
||||||
Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick
|
Here is a version of <span ngio-ex>!{_appModuleTsVsMainTs}</span> that performs this trick
|
||||||
|
|
||||||
这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的:
|
这个版本的<span ngio-ex>!{_appModuleTsVsMainTs}</span>就是用来实现这个小花招的:
|
||||||
|
|
||||||
+makeExcerpt(_appModuleTsVsMainTs, 'v2')
|
+makeExcerpt(_appModuleTsVsMainTs, 'v2')
|
||||||
|
|
||||||
block backend
|
block backend
|
||||||
|
@ -152,7 +152,7 @@ block backend
|
||||||
|
|
||||||
导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
|
导入`InMemoryWebApiModule`并将其加入到模块的`imports`数组。
|
||||||
`InMemoryWebApiModule`将`Http`客户端默认的后端服务(这是一个辅助服务,负责与远程服务器对话)替换成了*内存Web API*服务:
|
`InMemoryWebApiModule`将`Http`客户端默认的后端服务(这是一个辅助服务,负责与远程服务器对话)替换成了*内存Web API*服务:
|
||||||
|
|
||||||
+makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '')
|
+makeExcerpt(_appModuleTsVsMainTs, 'in-mem-web-api', '')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -245,9 +245,9 @@ block get-heroes-details
|
||||||
converting that `Observable` to a `Promise` using the `toPromise` operator.
|
converting that `Observable` to a `Promise` using the `toPromise` operator.
|
||||||
|
|
||||||
*现在*,我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象,回到已经熟悉的地盘。
|
*现在*,我们先利用`toPromise`操作符把`Observable`直接转换成`Promise`对象,回到已经熟悉的地盘。
|
||||||
|
|
||||||
+makeExcerpt('app/hero.service.ts', 'to-promise', '')
|
+makeExcerpt('app/hero.service.ts', 'to-promise', '')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ...
|
Unfortunately, the Angular `Observable` doesn't have a `toPromise` operator ...
|
||||||
not out of the box.
|
not out of the box.
|
||||||
|
@ -263,7 +263,7 @@ block get-heroes-details
|
||||||
有一大票像`toPromise`这样的操作符,会扩展`Observable`,为其添加有用的能力。
|
有一大票像`toPromise`这样的操作符,会扩展`Observable`,为其添加有用的能力。
|
||||||
如果我们希望得到那些能力,就得自己添加那些操作符。
|
如果我们希望得到那些能力,就得自己添加那些操作符。
|
||||||
那很容易,只要从RxJS库中导入它们就可以了,就像这样:
|
那很容易,只要从RxJS库中导入它们就可以了,就像这样:
|
||||||
|
|
||||||
+makeExcerpt('app/hero.service.ts', 'rxjs', '')
|
+makeExcerpt('app/hero.service.ts', 'rxjs', '')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -369,7 +369,7 @@ block get-heroes-details
|
||||||
|
|
||||||
我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候,页头上的英雄名字也会随之更新。
|
我们已经可以在英雄详情中编辑英雄的名字了。来试试吧。在输入的时候,页头上的英雄名字也会随之更新。
|
||||||
不过当我们点了后退按钮时,这些更新就丢失了。
|
不过当我们点了后退按钮时,这些更新就丢失了。
|
||||||
|
|
||||||
.l-sub-section
|
.l-sub-section
|
||||||
:marked
|
:marked
|
||||||
Updates weren't lost before, what's happening?
|
Updates weren't lost before, what's happening?
|
||||||
|
@ -464,14 +464,14 @@ block get-heroes-details
|
||||||
Finally, we implement the `create` method in the `HeroService` class.
|
Finally, we implement the `create` method in the `HeroService` class.
|
||||||
|
|
||||||
最后,我们在`HeroService`类中实现这个`create`方法。
|
最后,我们在`HeroService`类中实现这个`create`方法。
|
||||||
|
|
||||||
+makeExcerpt('app/hero.service.ts', 'create')
|
+makeExcerpt('app/hero.service.ts', 'create')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
Refresh the browser and create some new heroes!
|
Refresh the browser and create some new heroes!
|
||||||
|
|
||||||
刷新浏览器,并创建一些新的英雄!
|
刷新浏览器,并创建一些新的英雄!
|
||||||
|
|
||||||
.l-main-section
|
.l-main-section
|
||||||
:marked
|
:marked
|
||||||
## Delete a hero
|
## Delete a hero
|
||||||
|
@ -636,14 +636,14 @@ block observables-section-intro
|
||||||
The component template is simple — just a text box and a list of matching search results.
|
The component template is simple — just a text box and a list of matching search results.
|
||||||
|
|
||||||
组件模板很简单,就是一个输入框和一个相匹配的搜索结果列表。
|
组件模板很简单,就是一个输入框和一个相匹配的搜索结果列表。
|
||||||
|
|
||||||
+makeExample('app/hero-search.component.html')
|
+makeExample('app/hero-search.component.html')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We'll also want to add styles for the new component.
|
We'll also want to add styles for the new component.
|
||||||
|
|
||||||
我们还要往这个新组件中添加样式。
|
我们还要往这个新组件中添加样式。
|
||||||
|
|
||||||
+makeExample('app/hero-search.component.css')
|
+makeExample('app/hero-search.component.css')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -666,7 +666,7 @@ block observables-section-intro
|
||||||
Time to create the `HeroSearchComponent` class and metadata.
|
Time to create the `HeroSearchComponent` class and metadata.
|
||||||
|
|
||||||
该创建`HeroSearchComponent`类及其元数据了。
|
该创建`HeroSearchComponent`类及其元数据了。
|
||||||
|
|
||||||
+makeExample('app/hero-search.component.ts')
|
+makeExample('app/hero-search.component.ts')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -677,7 +677,7 @@ block observables-section-intro
|
||||||
Let's focus on the `!{_priv}searchTerms`:
|
Let's focus on the `!{_priv}searchTerms`:
|
||||||
|
|
||||||
仔细看下这个`searchTerms`:
|
仔细看下这个`searchTerms`:
|
||||||
|
|
||||||
+makeExcerpt('app/hero-search.component.ts', 'searchTerms', '')
|
+makeExcerpt('app/hero-search.component.ts', 'searchTerms', '')
|
||||||
|
|
||||||
block search-criteria-intro
|
block search-criteria-intro
|
||||||
|
@ -691,7 +691,7 @@ block search-criteria-intro
|
||||||
Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
|
Each call to `search` puts a new string into this subject's _observable_ stream by calling `next`.
|
||||||
|
|
||||||
每当调用`search`时都会调用`next`来把新的字符串放进该主体的_可观察_流中。
|
每当调用`search`时都会调用`next`来把新的字符串放进该主体的_可观察_流中。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
<a id="ngoninit"></a>
|
<a id="ngoninit"></a>
|
||||||
#### Initialize the _**heroes**_ property (_**ngOnInit**_)
|
#### Initialize the _**heroes**_ property (_**ngOnInit**_)
|
||||||
|
@ -769,7 +769,7 @@ block observable-transformers
|
||||||
|
|
||||||
注意,_取消_`HeroSearchService`的可观察对象并不会实际中止(abort)一个未完成的HTTP请求,除非有一天我们支持了这个特性,这个问题我们以后再讨论。
|
注意,_取消_`HeroSearchService`的可观察对象并不会实际中止(abort)一个未完成的HTTP请求,除非有一天我们支持了这个特性,这个问题我们以后再讨论。
|
||||||
目前我们的做法只是丢弃不希望的结果。
|
目前我们的做法只是丢弃不希望的结果。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
* `catch` intercepts a failed observable.
|
* `catch` intercepts a failed observable.
|
||||||
Our simple example prints the error to the console; a real life application should do better.
|
Our simple example prints the error to the console; a real life application should do better.
|
||||||
|
@ -797,7 +797,7 @@ block observable-transformers
|
||||||
Many authorities say we should do just that.
|
Many authorities say we should do just that.
|
||||||
|
|
||||||
有很多权威人士建议我们这样做。
|
有很多权威人士建议我们这样做。
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
We take a different approach in this example.
|
We take a different approach in this example.
|
||||||
We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
|
We combine all of the RxJS `Observable` extensions that _our entire app_ requires into a single RxJS imports file.
|
||||||
|
@ -833,7 +833,7 @@ block observable-transformers
|
||||||
and add it to the `!{_declarations}` !{_array}:
|
and add it to the `!{_declarations}` !{_array}:
|
||||||
|
|
||||||
最后,从<span ngio-ex>hero-search.component.ts</span>中导入`HeroSearchComponent`并将其添加到`declarations`数组中。
|
最后,从<span ngio-ex>hero-search.component.ts</span>中导入`HeroSearchComponent`并将其添加到`declarations`数组中。
|
||||||
|
|
||||||
+makeExcerpt(declFile, 'search')
|
+makeExcerpt(declFile, 'search')
|
||||||
|
|
||||||
:marked
|
:marked
|
||||||
|
@ -933,37 +933,37 @@ block filetree
|
||||||
|
|
||||||
block file-summary
|
block file-summary
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
`toh-6/ts/app/app.component.ts,
|
`toh-6/ts/app/app.component.ts,
|
||||||
toh-6/ts/app/app.module.ts,
|
toh - 6 / ts / app / app.module.ts,
|
||||||
toh-6/ts/app/heroes.component.ts,
|
toh - 6 / ts / app / heroes.component.ts,
|
||||||
toh-6/ts/app/heroes.component.html,
|
toh - 6 / ts / app / heroes.component.html,
|
||||||
toh-6/ts/app/heroes.component.css,
|
toh - 6 / ts / app / heroes.component.css,
|
||||||
toh-6/ts/app/hero-detail.component.ts,
|
toh - 6 / ts / app / hero - detail.component.ts,
|
||||||
toh-6/ts/app/hero-detail.component.html,
|
toh - 6 / ts / app / hero - detail.component.html,
|
||||||
toh-6/ts/app/hero.service.ts,
|
toh - 6 / ts / app / hero.service.ts,
|
||||||
toh-6/ts/app/in-memory-data.service.ts`,
|
toh - 6 / ts / app / in -memory - data.service.ts`,
|
||||||
',,,,,,,,',
|
',,,,,,,,',
|
||||||
`app.comp...ts,
|
`app.comp...ts,
|
||||||
app.mod...ts,
|
app.mod...ts,
|
||||||
heroes.comp...ts,
|
heroes.comp...ts,
|
||||||
heroes.comp...html,
|
heroes.comp...html,
|
||||||
heroes.comp...css,
|
heroes.comp...css,
|
||||||
hero-detail.comp...ts,
|
hero - detail.comp...ts,
|
||||||
hero-detail.comp...html,
|
hero - detail.comp...html,
|
||||||
hero.service.ts,
|
hero.service.ts,
|
||||||
in-memory-data.service.ts`
|
in-memory-data.service.ts`
|
||||||
)
|
)
|
||||||
|
|
||||||
+makeTabs(
|
+makeTabs(
|
||||||
`toh-6/ts/app/hero-search.service.ts,
|
`toh-6/ts/app/hero-search.service.ts,
|
||||||
toh-6/ts/app/hero-search.component.ts,
|
toh - 6 / ts / app / hero - search.component.ts,
|
||||||
toh-6/ts/app/hero-search.component.html,
|
toh - 6 / ts / app / hero - search.component.html,
|
||||||
toh-6/ts/app/hero-search.component.css,
|
toh - 6 / ts / app / hero - search.component.css,
|
||||||
toh-6/ts/app/rxjs-extensions.ts`,
|
toh - 6 / ts / app / rxjs - extensions.ts`,
|
||||||
null,
|
null,
|
||||||
`hero-search.service.ts,
|
`hero-search.service.ts,
|
||||||
hero-search.component.ts,
|
hero - search.component.ts,
|
||||||
hero-search.component.html,
|
hero - search.component.html,
|
||||||
hero-search.component.css,
|
hero - search.component.css,
|
||||||
rxjs-extensions.ts`
|
rxjs - extensions.ts`
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue