@title
生命周期钩子
@intro
Angular 调用指令和组件的生命周期钩子函数,包括它的创建、变更和销毁时。
@description
## Contents
## 目录
* [Component lifecycle hooks overview](guide/lifecycle-hooks#hooks-overview)
[组件生命周期概览](guide/lifecycle-hooks#hooks-overview)
* [Lifecycle sequence](guide/lifecycle-hooks#hooks-purpose-timing)
[生命周期的顺序](guide/lifecycle-hooks#hooks-purpose-timing)
* [Interfaces are optional (technically)](guide/lifecycle-hooks#interface-optional)
[接口是可选的(理论上)](guide/lifecycle-hooks#interface-optional)
* [Other Angular lifecycle hooks](guide/lifecycle-hooks#other-lifecycle-hooks)
[其它Angular生命周期钩子](guide/lifecycle-hooks#other-lifecycle-hooks)
* [Lifecycle examples](guide/lifecycle-hooks#the-sample)
[生命周期范例](guide/lifecycle-hooks#the-sample)
* [Peek-a-boo: all hooks](guide/lifecycle-hooks#peek-a-boo)
[Peek-a-boo:所有钩子](guide/lifecycle-hooks#peek-a-boo)
* [Spying OnInit and OnDestroy](guide/lifecycle-hooks#spy)
[监听OnInit和OnDestroy](guide/lifecycle-hooks#spy)
* [OnInit](guide/lifecycle-hooks#oninit)
* [OnDestroy](guide/lifecycle-hooks#ondestroy)
* [OnChanges](guide/lifecycle-hooks#onchanges)
* [DoCheck](guide/lifecycle-hooks#docheck)
* [AfterView](guide/lifecycle-hooks#afterview)
* [Abide by the unidirectional data flow rule](guide/lifecycle-hooks#wait-a-tick)
[遵循单向数据流规则](guide/lifecycle-hooks#wait-a-tick)
* [AfterContent](guide/lifecycle-hooks#aftercontent)
* [Content projection](guide/lifecycle-hooks#content-projection)
[内容投影](guide/lifecycle-hooks#content-projection)
* [AfterContent hooks](guide/lifecycle-hooks#aftercontent-hooks)
[AfterContent钩子](guide/lifecycle-hooks#aftercontent-hooks)
* [No unidirectional flow worries with _AfterContent_](guide/lifecycle-hooks#no-unidirectional-flow-worries)
[非单向数据流下_AfterContent_的注意事项](guide/lifecycle-hooks#no-unidirectional-flow-worries)
Try the
Hook 钩子 |
Purpose and Timing 目的和时机 |
---|---|
ngOnChanges()
|
Respond when Angular (re)sets data-bound input properties. The method receives a `SimpleChanges` object of current and previous property values. 当Angular(重新)设置数据绑定输入属性时响应。 该方法接受当前和上一属性值的`SimpleChanges`对象 Called before `ngOnInit()` and whenever one or more data-bound input properties change. 当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在`ngOnInit()`之前。 |
ngOnInit()
|
Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties. 在Angular第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 Called _once_, after the _first_ `ngOnChanges()`. 在第一轮`ngOnChanges()`完成之后调用,只调用**一次**。 |
ngDoCheck()
|
Detect and act upon changes that Angular can't or won't detect on its own. 检测,并在发生Angular无法或不愿意自己检测的变化时作出反应。 Called during every change detection run, immediately after `ngOnChanges()` and `ngOnInit()`. 在每个Angular变更检测周期中调用,`ngOnChanges()`和`ngOnInit()`之后。 |
ngAfterContentInit()
|
Respond after Angular projects external content into the component's view. 当把内容投影进组件之后调用。 Called _once_ after the first `ngDoCheck()`. 第一次`ngDoCheck()`之后调用,只调用一次。 _A component-only hook_. **只适用于组件**。 |
ngAfterContentChecked()
|
Respond after Angular checks the content projected into the component. 每次完成被投影组件内容的变更检测之后调用。 Called after the `ngAfterContentInit()` and every subsequent `ngDoCheck()`. `ngAfterContentInit()`和每次`ngDoCheck()`之后调用 _A component-only hook_. **只适合组件**。 |
ngAfterViewInit()
|
Respond after Angular initializes the component's views and child views. 初始化完组件视图及其子视图之后调用。 Called _once_ after the first `ngAfterContentChecked()`. 第一次`ngAfterContentChecked()`之后调用,只调用一次。 _A component-only hook_. **只适合组件**。 |
ngAfterViewChecked()
|
Respond after Angular checks the component's views and child views. 每次做完组件视图和子视图的变更检测之后调用。 Called after the `ngAfterViewInit` and every subsequent `ngAfterContentChecked()`. `ngAfterViewInit()`和每次`ngAfterContentChecked()`之后调用。 _A component-only hook_. **只适合组件**。 |
ngOnDestroy
|
Cleanup just before Angular destroys the directive/component. Unsubscribe Observables and detach event handlers to avoid memory leaks. 当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏。 Called _just before_ Angular destroys the directive/component. 在Angular销毁指令/组件之前调用。 |
Component 组件 |
Description 描述 |
---|---|
Peek-a-boo | Demonstrates every lifecycle hook. Each hook method writes to the on-screen log. 展示每个生命周期钩子,每个钩子方法都会在屏幕上显示一条日志。 |
Spy |
Directives have lifecycle hooks too.
A `SpyDirective` can log when the element it spies upon is
created or destroyed using the `ngOnInit` and `ngOnDestroy` hooks.
指令也同样有生命周期钩子。我们新建了一个`SpyDirective`,利用`ngOnInit`和`ngOnDestroy`钩子,在它所监视的每个元素被创建或销毁时输出日志。
This example applies the `SpyDirective` to a ` ` in an `ngFor` *hero* repeater
managed by the parent `SpyComponent`.
本例把`SpyDirective`应用到父组件里的`ngFor`*英雄*重复器(repeater)的` `里面。
|
OnChanges | See how Angular calls the `ngOnChanges()` hook with a `changes` object every time one of the component input properties changes. Shows how to interpret the `changes` object. 这里将会看到:每当组件的输入属性发生变化时,Angular会如何以`changes`对象作为参数去调用`ngOnChanges()`钩子。 展示了该如何理解和使用`changes`对象。 |
DoCheck | Implements an `ngDoCheck()` method with custom change detection. See how often Angular calls this hook and watch it post changes to a log. 实现了一个`ngDoCheck()`方法,通过它可以自定义变更检测逻辑。 这里将会看到:Angular会用什么频度调用这个钩子,监视它的变化,并把这些变化输出成一条日志。 |
AfterView | Shows what Angular means by a *view*. Demonstrates the `ngAfterViewInit` and `ngAfterViewChecked` hooks. 显示Angular中的*视图*所指的是什么。 演示了`ngAfterViewInit`和`ngAfterViewChecked`钩子。 |
AfterContent | Shows how to project external content into a component and how to distinguish projected content from a component's view children. Demonstrates the `ngAfterContentInit` and `ngAfterContentChecked` hooks. 展示如何把外部内容投影进组件中,以及如何区分“投影进来的内容”和“组件的子视图”。 演示了`ngAfterContentInit`和`ngAfterContentChecked`钩子。 |
Counter 计数器 |
Demonstrates a combination of a component and a directive each with its own hooks. 演示了组件和指令的组合,它们各自有自己的钩子。 In this example, a `CounterComponent` logs a change (via `ngOnChanges`) every time the parent component increments its input counter property. Meanwhile, the `SpyDirective` from the previous example is applied to the `CounterComponent` log where it watches log entries being created and destroyed. 在这个例子中,每当父组件递增它的输入属性`counter`时,`CounterComponent`就会通过`ngOnChanges`记录一条变更。 同时,我们还把前一个例子中的`SpyDirective`用在`CounterComponent`上,来提供日志,可以同时观察到日志的创建和销毁过程。 |