angular-cn/aio/content/cheatsheet/lifecycle hooks.md
Pete Bacon Darwin 600402d440 build(aio): big move of docs related files (#14361)
All the docs related files (docs-app, doc-gen, content, etc)
are now to be found inside the `/aio` folder.

The related gulp tasks have been moved from the top level
gulp file to a new one inside the `/aio` folder.

The structure of the `/aio` folder now looks like:

```
/aio/
  build/         # gulp tasks
  content/       #MARKDOWN FILES for devguides, cheatsheet, etc
    devguides/
    cheatsheets/
  transforms/    #dgeni packages, templates, etc
  src/
    app/
    assets/
    content/    #HTML + JSON build artifacts produced by dgeni from /aio/content.
                #This dir is .gitignored-ed
  e2e/           #protractor tests for the doc viewer app
  node_modules/ #dependencies for both the doc viewer builds and the dgeni stuff
                #This dir is .gitignored-ed
  gulpfile.js   #Tasks for generating docs and building & deploying the doc viewer
```

Closes #14361
2017-02-09 11:58:36 -08:00

2.6 KiB

@cheatsheetSection Directive and component change detection and lifecycle hooks @cheatsheetIndex 9 @description {@target ts}(implemented as class methods){@endtarget} {@target js}(implemented as component properties){@endtarget}

@cheatsheetItem syntax(ts): constructor(myService: MyService, ...) { ... }|constructor(myService: MyService, ...) syntax(js): constructor: function(MyService, ...) { ... }|constructor: function(MyService, ...) description: Called before any other lifecycle hook. Use it to inject dependencies, but avoid any serious work here.

@cheatsheetItem syntax(ts): ngOnChanges(changeRecord) { ... }|ngOnChanges(changeRecord) syntax(js): ngOnChanges: function(changeRecord) { ... }|ngOnChanges: function(changeRecord) description: Called after every change to input properties and before processing content or child views.

@cheatsheetItem syntax(ts): ngOnInit() { ... }|ngOnInit() syntax(js): ngOnInit: function() { ... }|ngOnInit: function() description: Called after the constructor, initializing input properties, and the first call to ngOnChanges.

@cheatsheetItem syntax(ts): ngDoCheck() { ... }|ngDoCheck() syntax(js): ngDoCheck: function() { ... }|ngDoCheck: function() description: Called every time that the input properties of a component or a directive are checked. Use it to extend change detection by performing a custom check.

@cheatsheetItem syntax(ts): ngAfterContentInit() { ... }|ngAfterContentInit() syntax(js): ngAfterContentInit: function() { ... }|ngAfterContentInit: function() description: Called after ngOnInit when the component's or directive's content has been initialized.

@cheatsheetItem syntax(ts): ngAfterContentChecked() { ... }|ngAfterContentChecked() syntax(js): ngAfterContentChecked: function() { ... }|ngAfterContentChecked: function() description: Called after every check of the component's or directive's content.

@cheatsheetItem syntax(ts): ngAfterViewInit() { ... }|ngAfterViewInit() syntax(js): ngAfterViewInit: function() { ... }|ngAfterViewInit: function() description: Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.

@cheatsheetItem syntax(ts): ngAfterViewChecked() { ... }|ngAfterViewChecked() syntax(js): ngAfterViewChecked: function() { ... }|ngAfterViewChecked: function() description: Called after every check of the component's view. Applies to components only.

@cheatsheetItem syntax(ts): ngOnDestroy() { ... }|ngOnDestroy() syntax(js): ngOnDestroy: function() { ... }|ngOnDestroy: function() description: Called once, before the instance is destroyed.