修正了api的链接(仅中文版)

This commit is contained in:
Zhicheng Wang 2016-06-10 14:45:12 +08:00
parent 6b8e09bf2b
commit 164244d77a
8 changed files with 33 additions and 33 deletions

View File

@ -225,7 +225,7 @@ table(width="100%")
attached to provide configuration and metadata. For example, attached to provide configuration and metadata. For example,
a component must have a [`@Component`](../api/core/Component-decorator.html) decorator. a component must have a [`@Component`](../api/core/Component-decorator.html) decorator.
大部分Angular 2的类都有一个或者多个附加的TypeScript*装饰器*,用来提供配置和元数据。比如一个组件必须要有一个[`@Component`](../api/core/Component-decorator.html)装饰器。 大部分Angular 2的类都有一个或者多个附加的TypeScript*装饰器*,用来提供配置和元数据。比如一个组件必须要有一个[`@Component`](../api/core/index/Component-decorator.html)装饰器。
+makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." ) +makeExample('cb-ts-to-js/ts/app/hero.component.ts', 'metadata')(format="." )
@ -244,7 +244,7 @@ table(width="100%")
In the following example, we create a new instance of `Component` that corresponds In the following example, we create a new instance of `Component` that corresponds
to the [`@Component`](../api/core/Component-decorator.html) TypeScript decorator. to the [`@Component`](../api/core/Component-decorator.html) TypeScript decorator.
在下面的例子中,我们新建了一个`Component`的新实例,与[`@Component`](../api/core/Component-decorator.html)TypeScript装饰器对应。 在下面的例子中,我们新建了一个`Component`的新实例,与[`@Component`](../api/core/index/Component-decorator.html)TypeScript装饰器对应。
+makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." ) +makeExample('cb-ts-to-js/js/app/hero.component.js', 'metadata')(format="." )
@ -361,7 +361,7 @@ table(width="100%")
They may optionally specify input and output binding names if we want them to be They may optionally specify input and output binding names if we want them to be
different from the class property names. different from the class property names.
我们使用[`@Input`](../api/core/Input-var.html) 和 [`@Output`](../api/core/Output-var.html)装饰器 我们使用[`@Input`](../api/core/index/Input-var.html) 和 [`@Output`](../api/core/index/Output-var.html)装饰器
来装饰[输入和输出](../guide/template-syntax.html#inputs-outputs)。 来装饰[输入和输出](../guide/template-syntax.html#inputs-outputs)。
如果想要他们有与类属性名字不同的名字,我们可以选择性的指定输入和输出的绑定名字。 如果想要他们有与类属性名字不同的名字,我们可以选择性的指定输入和输出的绑定名字。
@ -501,9 +501,9 @@ table(width="100%")
inject content child queries with [`@Query`](../api/core/Query-var.html) inject content child queries with [`@Query`](../api/core/Query-var.html)
and inject view child queries with [`@ViewQuery`](../api/core/ViewQuery-var.html). and inject view child queries with [`@ViewQuery`](../api/core/ViewQuery-var.html).
我们可以附加额外装饰器到构造函数来调整注入行为。我们使用[`@Optional`](../api/core/Optional-var.html)来标示依赖是可选的, 我们可以附加额外装饰器到构造函数来调整注入行为。我们使用[`@Optional`](../api/core/index/Optional-var.html)来标示依赖是可选的,
用[`@Attribute`](../api/core/Attribute-var.html)标示注入宿主元素属性, 用[`@Attribute`](../api/core/index/Attribute-var.html)标示注入宿主元素属性,
用[`@Query`](../api/core/Query-var.html)来注入内容子查询,用[`@ViewQuery`](../api/core/ViewQuery-var.html)来注入视图子查询。 用[`@Query`](../api/core/index/Query-var.html)来注入内容子查询,用[`@ViewQuery`](../api/core/index/ViewQuery-var.html)来注入视图子查询。
+makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." ) +makeExample('cb-ts-to-js/ts/app/hero-di-inject-additional.component.ts')(format="." )
@ -537,8 +537,8 @@ table(width="100%")
by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the by adding `new ng.core.Host()` or `ng.core.SkipSelf()` in the
parameters array. parameters array.
我们可以用同样的方法来应用其他额外的参数装饰器,比如[`@Host`](../api/core/Host-var.html) 和 我们可以用同样的方法来应用其他额外的参数装饰器,比如[`@Host`](../api/core/index/Host-var.html) 和
[`@SkipSelf`](../api/core/SkipSelf-var.html):添加`new ng.core.Host()` 或 `ng.core.SkipSelf()`到参数数组中。 [`@SkipSelf`](../api/core/index/SkipSelf-var.html):添加`new ng.core.Host()` 或 `ng.core.SkipSelf()`到参数数组中。
a(id="other-property-metadata") a(id="other-property-metadata")
@ -570,8 +570,8 @@ table(width="100%")
host element events to component event handlers. host element events to component event handlers.
我们可以使用宿主属性装饰器来绑定一个宿主元素到一个组件或者指令。 我们可以使用宿主属性装饰器来绑定一个宿主元素到一个组件或者指令。
[`@HostBinding`](../api/core/HostBinding-var.html)装饰器绑定宿主元素属性到组件数据属性。 [`@HostBinding`](../api/core/index/HostBinding-var.html)装饰器绑定宿主元素属性到组件数据属性。
[`@HostListener`](../api/core/HostListener-var.html)装饰器绑定宿主元素事件到组件事件处理器。 [`@HostListener`](../api/core/index/HostListener-var.html)装饰器绑定宿主元素事件到组件事件处理器。
+makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." ) +makeExample('cb-ts-to-js/ts/app/heroes-bindings.component.ts')(format="." )
@ -624,8 +624,8 @@ table(width="100%")
allow a component to query instances of other components that are used in allow a component to query instances of other components that are used in
its view. its view.
[`@ViewChild`](../api/core/ViewChild-var.html)和 [`@ViewChild`](../api/core/index/ViewChild-var.html)和
[`@ViewChildren`](../api/core/ViewChildren-var.html)属性装饰器允许一个组件查询 [`@ViewChildren`](../api/core/index/ViewChildren-var.html)属性装饰器允许一个组件查询
在自己模板里使用过的其他组件的实例。 在自己模板里使用过的其他组件的实例。
@ -637,8 +637,8 @@ table(width="100%")
allow a component to query instances of other components that have been projected allow a component to query instances of other components that have been projected
into its view from elsewhere. into its view from elsewhere.
[`@ContentChild`](../api/core/ContentChild-var.html) 和 [`@ContentChild`](../api/core/index/ContentChild-var.html) 和
[`@ContentChildren`](../api/core/ContentChildren-var.html)属性装饰器允许一个组件查询那些被从其它地方投影进自己视图里的组件的实例。 [`@ContentChildren`](../api/core/index/ContentChildren-var.html)属性装饰器允许一个组件查询那些被从其它地方投影进自己视图里的组件的实例。
+makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." ) +makeExample('cb-ts-to-js/ts/app/heroes-queries.component.ts', 'content')(format="." )

View File

@ -668,7 +668,7 @@ figure.image-display
There is also a `NgControl` *abstract* directive which is *not the same thing*. There is also a `NgControl` *abstract* directive which is *not the same thing*.
We often ignore this technical distinction and refer to `NgControlName` more conveniently (albeit incorrectly) as the *NgControl* directive. We often ignore this technical distinction and refer to `NgControlName` more conveniently (albeit incorrectly) as the *NgControl* directive.
我们模板中的这个`ngControl`*属性*实际上被映射到了 [NgControlName](../api/common/NgControlName-directive.html)指令。 我们模板中的这个`ngControl`*属性*实际上被映射到了 [NgControlName](../api/common/index/NgControlName-directive.html)指令。
虽然还有另一个叫`NgControl`的*抽象*指令,但和这个属性不是一回事。 虽然还有另一个叫`NgControl`的*抽象*指令,但和这个属性不是一回事。
我们通常会忽略这点技术上的差异。为了更方便(尽管不正确),我们提起`NgControlName`时还是会把它叫做*NgControl*指令。 我们通常会忽略这点技术上的差异。为了更方便(尽管不正确),我们提起`NgControlName`时还是会把它叫做*NgControl*指令。
@ -861,7 +861,7 @@ figure.image-display
We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm". We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm".
为什么是"ngForm" 为什么是"ngForm"
指令的[exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把局部变量链接到指令中。 指令的[exportAs](../api/core/index/DirectiveMetadata-class.html#!#exportAs)属性告诉Angular如何把局部变量链接到指令中。
这里我们把`name`设置为`ngForm`就是因为`NgControlName`指令的`exportAs`属性设置为了“ngForm”。 这里我们把`name`设置为`ngForm`就是因为`NgControlName`指令的`exportAs`属性设置为了“ngForm”。
This seems unintuitive at first until we realize that *all* control directives in the This seems unintuitive at first until we realize that *all* control directives in the
@ -1038,7 +1038,7 @@ figure.image-display
What `NgForm` directive? We didn't add an [NgForm](../api/common/NgForm-directive.html) directive! What `NgForm` directive? We didn't add an [NgForm](../api/common/NgForm-directive.html) directive!
什么`NgForm`指令?我们没有添加过[NgForm](../api/common/NgForm-directive.html)指令啊! 什么`NgForm`指令?我们没有添加过[NgForm](../api/common/index/NgForm-directive.html)指令啊!
Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically. Angular did. Angular creates and attaches an `NgForm` directive to the `<form>` tag automatically.

View File

@ -659,7 +659,7 @@ figure.image-display
[SimpleChange](../api/core/SimpleChange-class.html) object with the current and previous property values. [SimpleChange](../api/core/SimpleChange-class.html) object with the current and previous property values.
We iterate over the changed properties and log them. We iterate over the changed properties and log them.
`ngOnChanges`方法获取了一个对象,它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/SimpleChange-class.html)对象, `ngOnChanges`方法获取了一个对象,它把每个发生变化的属性名都映射到了一个[SimpleChange](../api/core/index/SimpleChange-class.html)对象,
该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代,并记录它们。 该对象中有属性的当前值和前一个值。我们在这些发生了变化的属性上进行迭代,并记录它们。
The input properties for our example `OnChangesComponent` are `hero` and `power`. The input properties for our example `OnChangesComponent` are `hero` and `power`.
@ -755,7 +755,7 @@ figure.image-display
We also see that the `ngOnChanges` method is called in contradiction of the We also see that the `ngOnChanges` method is called in contradiction of the
[incorrect API documentation](../api/core/DoCheck-interface.html). [incorrect API documentation](../api/core/DoCheck-interface.html).
我们还看到,`ngOnChanges`方法的调用方式与[API文档](../api/core/DoCheck-interface.html)中是不一样的这是因为API文档过时了。 我们还看到,`ngOnChanges`方法的调用方式与[API文档](../api/core/index/DoCheck-interface.html)中是不一样的这是因为API文档过时了。
译注这是经过与官方开发组沟通得到的消息由于代码快速迭代因此API文档现在的更新不够及时将来会进行一次系统的梳理和更正 译注这是经过与官方开发组沟通得到的消息由于代码快速迭代因此API文档现在的更新不够及时将来会进行一次系统的梳理和更正
.l-main-section .l-main-section
:marked :marked
@ -779,7 +779,7 @@ figure.image-display
which we can only reach by querying for the child view via the property decorated with which we can only reach by querying for the child view via the property decorated with
[@ViewChild](../api/core/ViewChild-var.html). [@ViewChild](../api/core/ViewChild-var.html).
下列钩子基于*子视图中*的每一次数据变更采取行动,我们只能通过带[@ViewChild](../api/core/ViewChild-var.html)装饰器的属性来访问子视图。 下列钩子基于*子视图中*的每一次数据变更采取行动,我们只能通过带[@ViewChild](../api/core/index/ViewChild-var.html)装饰器的属性来访问子视图。
+makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".") +makeExample('lifecycle-hooks/ts/app/after-view.component.ts', 'hooks', 'AfterViewComponent (class excerpts)')(format=".")
.a(id="wait-a-tick") .a(id="wait-a-tick")
@ -908,7 +908,7 @@ figure.image-display
which we can only reach by querying for it via the property decorated with which we can only reach by querying for it via the property decorated with
[@ContentChild](../api/core/ContentChild-var.html). [@ContentChild](../api/core/ContentChild-var.html).
下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动,这里我们只能通过带有[@ContentChild](../api/core/ContentChild-var.html)装饰器的属性来查询到“子级内容”。 下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动,这里我们只能通过带有[@ContentChild](../api/core/index/ContentChild-var.html)装饰器的属性来查询到“子级内容”。
+makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".") +makeExample('lifecycle-hooks/ts/app/after-content.component.ts', 'hooks', 'AfterContentComponent (class excerpts)')(format=".")

View File

@ -61,7 +61,7 @@ p.
function on the right. All pipes work this way. function on the right. All pipes work this way.
在这个插值表达式中,我们让组件的`birthday`值通过[管道操作符](./template-syntax.html#pipe)( | )流动到 在这个插值表达式中,我们让组件的`birthday`值通过[管道操作符](./template-syntax.html#pipe)( | )流动到
右侧的[Date管道](../api/common/DatePipe-class.html)函数中。所有管道都会用这种方式工作。 右侧的[Date管道](../api/common/index/DatePipe-class.html)函数中。所有管道都会用这种方式工作。
.l-main-section .l-main-section
:marked :marked
@ -147,7 +147,7 @@ figure.image-display
:marked :marked
Learn more about the `DatePipes` format options in the [API Docs](../api/common/DatePipe-class.html). Learn more about the `DatePipes` format options in the [API Docs](../api/common/DatePipe-class.html).
要了解更多`DatePipes`的格式选项,请参阅[API文档](../api/common/DatePipe-class.html)。 要了解更多`DatePipes`的格式选项,请参阅[API文档](../api/common/index/DatePipe-class.html)。
:marked :marked
## Chaining pipes ## Chaining pipes
@ -640,7 +640,7 @@ figure.image-display
provides an easy way to diagnosis a mysteriously failing data binding or provides an easy way to diagnosis a mysteriously failing data binding or
inspect an object for future binding. inspect an object for future binding.
[JsonPipe](../api/common/JsonPipe-class.html)为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时,提供了一个简单途径。 [JsonPipe](../api/common/index/JsonPipe-class.html)为你诊断数据绑定的某些神秘错误或为做进一步绑定而探查数据时,提供了一个简单途径。
:marked :marked
Here's the complete component implementation: Here's the complete component implementation:

View File

@ -629,7 +629,7 @@ code-example(format="." language="javascript").
[Headers](../api/http/Headers-class.html) are one of the [RequestOptions](../api/http/RequestOptions-class.html). [Headers](../api/http/Headers-class.html) are one of the [RequestOptions](../api/http/RequestOptions-class.html).
Compose the options object and pass it in as the *third* parameter of the `post` method, as shown above. Compose the options object and pass it in as the *third* parameter of the `post` method, as shown above.
[Headers](../api/http/Headers-class.html)是[RequestOptions](../api/http/RequestOptions-class.html)中的一员。 [Headers](../api/http/index/Headers-class.html)是[RequestOptions](../api/http/index/RequestOptions-class.html)中的一员。
可以把这些配置对象组合起来,并且传给`post`方法的*第三个*参数,就像前面见过的那样。 可以把这些配置对象组合起来,并且传给`post`方法的*第三个*参数,就像前面见过的那样。
:marked :marked

View File

@ -840,8 +840,8 @@ table
[contentChild](../api/core/ContentChild-var.html). [contentChild](../api/core/ContentChild-var.html).
如果我们不得不读取目标元素上的属性或调用它的某个方法,我们得用另一种技术。 如果我们不得不读取目标元素上的属性或调用它的某个方法,我们得用另一种技术。
参见API参考中的[viewChild](../api/core/ViewChild-var.html)和 参见API参考中的[viewChild](../api/core/index/ViewChild-var.html)和
[contentChild](../api/core/ContentChild-var.html)。 [contentChild](../api/core/index/ContentChild-var.html)。
// TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../ // TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../
@ -1315,7 +1315,7 @@ block style-property-name-dart-diff
The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything. The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything.
Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object. Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object.
指令使用典型的Angular [EventEmitter](../api/core/EventEmitter-class.html)来触发自定义事件。 指令使用典型的Angular [EventEmitter](../api/core/index/EventEmitter-class.html)来触发自定义事件。
指令创建一个`EventEmitter`实例,并且把它作为一个属性暴露出来。 指令创建一个`EventEmitter`实例,并且把它作为一个属性暴露出来。
指令调用`EventEmitter.emit(payload)`来触发事件,传进去的消息载荷可以是任何东西。 指令调用`EventEmitter.emit(payload)`来触发事件,传进去的消息载荷可以是任何东西。
父指令通过绑定到这个属性来监听这个事件,并且通过`$event`对象来访问这个载荷。 父指令通过绑定到这个属性来监听这个事件,并且通过`$event`对象来访问这个载荷。
@ -1461,7 +1461,7 @@ block style-property-name-dart-diff
a technique that is beyond the scope of this chapter. a technique that is beyond the scope of this chapter.
`ngModel`输入属性设置元素的值属性,而`ngModelChange`输出属性监听元素值的变化。 `ngModel`输入属性设置元素的值属性,而`ngModelChange`输出属性监听元素值的变化。
实现细节对每种元素都很特定,所以`NgModel`指令只和元素一起工作,比如输入框,它由[ControlValueAccessor](../api/common/ControlValueAccessor-interface.html)提供支持。 实现细节对每种元素都很特定,所以`NgModel`指令只和元素一起工作,比如输入框,它由[ControlValueAccessor](../api/common/index/ControlValueAccessor-interface.html)提供支持。
除非写一个合适的*值访问器*,否则我们不能把`[(ngModel)]`用在我们自己的自定义组件上。但*值访问器*技术超出了本章的范围。 除非写一个合适的*值访问器*,否则我们不能把`[(ngModel)]`用在我们自己的自定义组件上。但*值访问器*技术超出了本章的范围。
:marked :marked
Separate `ngModel` bindings is an improvement. We can do better. Separate `ngModel` bindings is an improvement. We can do better.
@ -1854,7 +1854,7 @@ block dart-no-truthy-falsey
:marked :marked
Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html). Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html).
要学习更多的*类似index*的值,例如`last`、`even`和`odd`,请参阅[NgFor API 参考](../api/common/NgFor-directive.html)。 要学习更多的*类似index*的值,例如`last`、`even`和`odd`,请参阅[NgFor API 参考](../api/common/index/NgFor-directive.html)。
:marked :marked
#### NgForTrackBy #### NgForTrackBy

View File

@ -577,7 +577,7 @@ figure.image-display
or anything like it. or anything like it.
在Angular 2中事情有点不一样。虽然变更检测仍然会在每一个事件之后发生却不再需要每次调用`scope.$apply()`了。 在Angular 2中事情有点不一样。虽然变更检测仍然会在每一个事件之后发生却不再需要每次调用`scope.$apply()`了。
这是因为所有Angular 2代码都运行在一个叫做[Angular zone](../api/core/NgZone-class.html)的地方。 这是因为所有Angular 2代码都运行在一个叫做[Angular zone](../api/core/index/NgZone-class.html)的地方。
Angular总是知道什么时候代码执行完了也就知道了它什么时候应该触发变更检测。代码本身并不需要调用`scope.$apply()`或其它类似的东西。 Angular总是知道什么时候代码执行完了也就知道了它什么时候应该触发变更检测。代码本身并不需要调用`scope.$apply()`或其它类似的东西。
In the case of hybrid applications, the `UpgradeAdapter` bridges the In the case of hybrid applications, the `UpgradeAdapter` bridges the
@ -621,7 +621,7 @@ figure.image-display
just like we could if it hadn't been downgraded. just like we could if it hadn't been downgraded.
当我们降级一个Angular 2组件然后把它用于Angular 1中时组件的输入属性就会被Angular 1的变更检测体系监视起来。 当我们降级一个Angular 2组件然后把它用于Angular 1中时组件的输入属性就会被Angular 1的变更检测体系监视起来。
当那些输入属性发生变化时,组件中相应的属性就会被设置。我们也能通过实现[OnChanges](../api/core/OnChanges-interface.html) 当那些输入属性发生变化时,组件中相应的属性就会被设置。我们也能通过实现[OnChanges](../api/core/index/OnChanges-interface.html)
接口来挂钩到这些更改,就像它未被降级时一样。 接口来挂钩到这些更改,就像它未被降级时一样。
Correspondingly, when we upgrade an Angular 1 component and use it from Angular 2, Correspondingly, when we upgrade an Angular 1 component and use it from Angular 2,

View File

@ -754,7 +754,7 @@ code-example(format='').
回退太多步儿会跑出我们的应用。 回退太多步儿会跑出我们的应用。
在Demo中这算不上问题。但在真实的应用中我们需要对此进行防范。 在Demo中这算不上问题。但在真实的应用中我们需要对此进行防范。
也许你该用[*routerCanDeactivate*钩子](/docs/ts/latest/api/router/CanDeactivate-interface.html)。 也许你该用[*routerCanDeactivate*钩子](/docs/ts/latest/api/router/index/CanDeactivate-interface.html)。
:marked :marked
Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template. Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template.