honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

review of lifecycle-hooks is done.

This commit is contained in:
Zhimin(Rex) YE 2016-06-05 22:15:38 +01:00
parent 49a2deb37b
commit 0e073bb214
1 changed files with 13 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
public/docs/ts/latest/guide/lifecycle-hooks.jade
View File

@ -11,16 +11,16 @@ block includes
A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children, A Component has a lifecycle managed by Angular itself. Angular creates it, renders it, creates and renders its children,
checks it when its data-bound properties change, and destroys it before removing it from the DOM. checks it when its data-bound properties change, and destroys it before removing it from the DOM.
组件有一个被Angular管理的生命周期。Angular创建它，渲染它，创建并渲染它的子组件，在它被绑定的属性发生变化时检查它，并在它从DOM中被移除前销毁它。 每个组件都有一个被Angular管理的生命周期。Angular创建它，渲染它，创建并渲染它的子组件，在它被绑定的属性发生变化时检查它，并在它从DOM中被移除前销毁它。
Angular offers **component lifecycle hooks** Angular offers **component lifecycle hooks**
that give us visibility into these key moments and the ability to act when they occur. that give us visibility into these key moments and the ability to act when they occur.
Angular提供了**组件生命周期钩子**，让我们能看到这些关键时刻，并赋予我们对此采取行动的能力。 Angular提供了**组件生命周期钩子**，把这些关键时刻暴露出来，赋予我们在它们发生时采取行动的能力。
We cover these hooks in this chapter and demonstrate how they work in code. We cover these hooks in this chapter and demonstrate how they work in code.
在本章中，我们将全面讲解这些钩子，演示下在代码层面它们是如何工作的。 在本章中，我们将全面讲解这些钩子，在代码层面演示它们是如何工作的。
* [The lifecycle hooks](#hooks-overview) * [The lifecycle hooks](#hooks-overview)
@ -76,7 +76,7 @@ a#hooks-overview
Directive and component instances have a lifecycle Directive and component instances have a lifecycle
as Angular creates, updates, and destroys them. as Angular creates, updates, and destroys them.
当Angular新建、更新和销毁指令和组件的实例时，就形成了一个生命周期。 指令和组件的实例有一个生命周期：新建、更新和销毁。
Developers can tap into key moments in that lifecycle by implementing Developers can tap into key moments in that lifecycle by implementing
one or more of the *Lifecycle Hook* interfaces in the Angular `core` library. one or more of the *Lifecycle Hook* interfaces in the Angular `core` library.
@ -87,14 +87,14 @@ a#hooks-overview
For example, the `OnInit` interface has a hook method named `ngOnInit`. For example, the `OnInit` interface has a hook method named `ngOnInit`.
We might implement it in a component class like this: We might implement it in a component class like this:
每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上`ng`前缀构成的。比如，`OnInit`接口有一个钩子方法叫做`ngOnInit`。 每个接口都有唯一的一个钩子方法，它们的名字是由接口名再加上`ng`前缀构成的。比如，`OnInit`接口的钩子方法叫做`ngOnInit`。
我们可以在一个组件类中实现它，就像这样： 我们可以在一个组件类中实现它，就像这样：
+makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.') +makeExample('lifecycle-hooks/ts/app/peek-a-boo.component.ts', 'ngOnInit', 'peek-a-boo.component.ts (excerpt)')(format='.')
:marked :marked
No directive or component will implement all of them and some of the hooks only make sense for components. No directive or component will implement all of them and some of the hooks only make sense for components.
Angular only calls a directive/component hook method *if it is defined*. Angular only calls a directive/component hook method *if it is defined*.
没有指令或者组件会实现所有这些接口，而有些钩子只对组件有意义。只有在指令/组件中*定义过的*那些钩子方法才会被Angular调用。 没有指令或者组件会实现所有这些接口，并且有些钩子只对组件有意义。只有在指令/组件中*定义过的*那些钩子方法才会被Angular调用。
block optional-interfaces block optional-interfaces
.l-sub-section .l-sub-section
:marked :marked
@ -117,7 +117,7 @@ block optional-interfaces
Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*. Angular instead inspects our directive and component classes and calls the hook methods *if they are defined*.
Angular will find and call methods like `ngOnInit()`, with or without the interfaces. Angular will find and call methods like `ngOnInit()`, with or without the interfaces.
Angular会去检测我们的指令和组件类，一旦发现钩子方法被定义了，就调用它们。 Angular会去检测我们的指令和组件的类，一旦发现钩子方法被定义了，就调用它们。
Agnular会找到并调用像`ngOnInit()`这样的钩子方法，有没有接口无所谓。 Agnular会找到并调用像`ngOnInit()`这样的钩子方法，有没有接口无所谓。
Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes Nonetheless, we strongly recommend adding interfaces to TypeScript directive classes
@ -335,7 +335,7 @@ p.
demonstrates the lifecycle hooks in action through a series of exercises demonstrates the lifecycle hooks in action through a series of exercises
presented as components under the control of the root `AppComponent`. presented as components under the control of the root `AppComponent`.
p #[+liveExampleLink('运行在线范例')] 通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习，演示了生命周期钩子的运作方式。 p #[+liveExampleLink('运行在线范例')]通过在受控于根组件`AppComponent`的一些组件上进行的一系列练习，演示了生命周期钩子的运作方式。
:marked :marked
They follow a common pattern: a *parent* component serves as a test rig for They follow a common pattern: a *parent* component serves as a test rig for
@ -625,7 +625,7 @@ figure.image-display
Put cleanup logic in `ngOnDestroy`, the logic that *must* run before Angular destroys the directive. Put cleanup logic in `ngOnDestroy`, the logic that *must* run before Angular destroys the directive.
把清理逻辑放在`ngOnDestroy`中，该逻辑*必须*在Angular销毁这个指令之前运行。 一些清理逻辑*必须*在Angular销毁指令之前运行，把它们放在`ngOnDestroy`中。
This is the time to notify another part of the application that this component is going away. This is the time to notify another part of the application that this component is going away.
@ -659,12 +659,12 @@ 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/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`.
我们这个例子中`OnChangesComponent`组件的输入属性是`hero`和`power`。 我们这个例子中的`OnChangesComponent`组件的输入属性是`hero`和`power`。
+makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'inputs')(format=".") +makeExample('lifecycle-hooks/ts/app/on-changes.component.ts', 'inputs')(format=".")
:marked :marked
The parent binds to them like this: The parent binds to them like this:
@ -897,7 +897,7 @@ figure.image-display
* The *AfterView* hooks concern `ViewChildren`, the child components whose element tags * The *AfterView* hooks concern `ViewChildren`, the child components whose element tags
appear *within* the component's template. appear *within* the component's template.
* *AfterView*钩子所关心的是`ViewChildren`，这些子组件的元素标签会出现在该组件的模板*中*。 * *AfterView*钩子所关心的是`ViewChildren`，这些子组件的元素标签会出现在该组件的模板*里面*。
* The *AfterContent* hooks concern `ContentChildren`, the child components that Angular * The *AfterContent* hooks concern `ContentChildren`, the child components that Angular
projected into the component. projected into the component.
@ -908,8 +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*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过 下列*AfterContent*钩子基于*子级内容*中值的变化而采取相应的行动，这里我们只能通过带有[@ContentChild](../api/core/ContentChild-var.html)装饰器的属性来查询到“子级内容”。
带有[@ContentChild](../api/core/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=".")