iSharkFly-Docs/angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(guide/lifecycle_hooks): fix typo

Browse Source
This commit is contained in:
Peter Bacon Darwin 2016-01-13 09:41:16 +00:00
parent 0f5294e32c
commit 8501cbcfed
1 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,14 +4,14 @@ include ../../../../_includes/_util-fns
# Component Lifecycle # Component Lifecycle
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 offers **Lifecycle hooks** Angular offers **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.
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.
[Live Example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html) [Live Example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html)
<!-- <!--
https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/interfaces.ts https://github.com/angular/angular/blob/master/modules/angular2/src/core/linker/interfaces.ts
--> -->
@ -21,11 +21,11 @@ include ../../../../_includes/_util-fns
## The Lifecycle Hooks ## The Lifecycle Hooks
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.
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, all of them available one or more of the "Lifecycle Hook" interfaces, all of them available
in the `angular2/core` library. in the `angular2/core` library.
Here is the complete lifecycle hook interface inventory: Here is the complete lifecycle hook interface inventory:
* `OnInit` * `OnInit`
@ -39,10 +39,10 @@ include ../../../../_includes/_util-fns
No directive or component will implement all of them and some of them only make No directive or component will implement all of them and some of them only make
sense for components. sense for components.
Each interface has a single hook method whose name is the interface name prefixed with `ng`. Each interface has a single hook method whose name is the interface name prefixed with `ng`.
For example, the `OnInit` interface has a hook method names `ngOnInit`. For example, the `OnInit` interface has a hook method named `ngOnInit`.
Angular calls these hook methods in the following order: Angular calls these hook methods in the following order:
* `ngOnChanges` - called when an input or output binding value changes * `ngOnChanges` - called when an input or output binding value changes
* `ngOnInit` - after the first `ngOnChanges` * `ngOnInit` - after the first `ngOnChanges`
@ -52,7 +52,7 @@ include ../../../../_includes/_util-fns
* `ngAfterViewInit` - after component's view(s) are initialized * `ngAfterViewInit` - after component's view(s) are initialized
* `ngAfterViewChecked` - after every check of a component's view(s) * `ngAfterViewChecked` - after every check of a component's view(s)
* `ngOnDestroy` - just before the directive is destroyed. * `ngOnDestroy` - just before the directive is destroyed.
The [live example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html) demonstrates The [live example](/resources/live-examples/lifecycle-hooks/ts/plnkr.html) demonstrates
these hooks. these hooks.
@ -65,26 +65,26 @@ include ../../../../_includes/_util-fns
with its own change detection processing with its own change detection processing
we would also add a `ngDoCheck` method. We would **not** implement `ngOnChanges`. we would also add a `ngDoCheck` method. We would **not** implement `ngOnChanges`.
We write either `ngOnChanges` or `ngDoCheck`, not both. We write either `ngOnChanges` or `ngDoCheck`, not both.
Custom change detection and `ngDoCheck` are on our documentation backlog. Custom change detection and `ngDoCheck` are on our documentation backlog.
:marked :marked
Peek-a-boo is a demo. We'd rarely if ever implement all interfaces like this in real life. Peek-a-boo is a demo. We'd rarely if ever implement all interfaces like this in real life.
We look forward to explaining the Peek-a-boo example and the other lifecycle hook examples in We look forward to explaining the Peek-a-boo example and the other lifecycle hook examples in
an update to this chapter. Meanwhile, please enjoy poking around in the an update to this chapter. Meanwhile, please enjoy poking around in the
[code](/resources/live-examples/lifecycle-hooks/ts/plnkr.html). [code](/resources/live-examples/lifecycle-hooks/ts/plnkr.html).
## Interface optional? ## Interface optional?
The lifecycle interfaces are optional. The lifecycle interfaces are optional.
We recommend adding them to benefit from TypeScript's strong typing and editor tooling. We recommend adding them to benefit from TypeScript's strong typing and editor tooling.
But they disappear from the transpiled JavaScript. But they disappear from the transpiled JavaScript.
Angular can't see them at runtime. And they are useless to someone developing in Angular can't see them at runtime. And they are useless to someone developing in
a language without interfaces (such as pure JavaScript). a language without interfaces (such as pure JavaScript).
Fortunately, they aren't necessary. Fortunately, they aren't necessary.
We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves. We don't have to add the lifecycle hook interfaces to our directives and components to benefit from the hooks themselves.
Angular instead inspects our directive and component classes Angular instead inspects our directive and component classes
and calls the hook methods *if they are defined*. 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.