fix few compiling errors(live examples)
This commit is contained in:
Zhimin YE
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:
|
||||||
|
|
@ -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
|
||||||
|
|
@ -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,
|
||||||
|
|
@ -2057,7 +2057,7 @@ block remember-the-brackets
|
||||||
我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的：
|
我们也期待它显示所选模板的值两次。这正是我们在这个例子中看到的：
|
||||||
|
|
||||||
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
|
||||||
|
|
@ -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