doc(Lifecycle events): Document the call order
This commit is contained in:
@ -1037,7 +1037,13 @@ export class Component extends Directive {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Lifecycle events are guaranteed to be called in the following order:
|
||||||
|
* - `onChange` (optional if any bindings have changed),
|
||||||
|
* - `onInit` (optional after the first check only),
|
||||||
|
* - `onCheck`,
|
||||||
|
* - `onAllChangesDone`
|
||||||
|
*/
|
||||||
@CONST()
|
@CONST()
|
||||||
export class LifecycleEvent {
|
export class LifecycleEvent {
|
||||||
constructor(public name: string) {}
|
constructor(public name: string) {}
|
||||||
@ -1150,7 +1156,8 @@ export const onCheck = CONST_EXPR(new LifecycleEvent("onCheck"));
|
|||||||
export const onInit = CONST_EXPR(new LifecycleEvent("onInit"));
|
export const onInit = CONST_EXPR(new LifecycleEvent("onInit"));
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Notify a directive when the bindings of all its children have been changed.
|
* Notify a directive when the bindings of all its children have been checked (whether they have
|
||||||
|
* changed or not).
|
||||||
*
|
*
|
||||||
* ## Example:
|
* ## Example:
|
||||||
*
|
*
|
||||||
|
@ -14,7 +14,15 @@ import {
|
|||||||
|
|
||||||
import {ListWrapper} from 'angular2/src/facade/collection';
|
import {ListWrapper} from 'angular2/src/facade/collection';
|
||||||
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
import {TestBed} from 'angular2/src/test_lib/test_bed';
|
||||||
import {Directive, Component, View, onCheck, onInit, onChange} from 'angular2/angular2';
|
import {
|
||||||
|
Directive,
|
||||||
|
Component,
|
||||||
|
View,
|
||||||
|
onCheck,
|
||||||
|
onInit,
|
||||||
|
onChange,
|
||||||
|
onAllChangesDone
|
||||||
|
} from 'angular2/angular2';
|
||||||
import * as viewAnn from 'angular2/src/core/annotations_impl/view';
|
import * as viewAnn from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
export function main() {
|
export function main() {
|
||||||
@ -23,7 +31,7 @@ export function main() {
|
|||||||
|
|
||||||
beforeEach(() => { ctx = new MyComp(); });
|
beforeEach(() => { ctx = new MyComp(); });
|
||||||
|
|
||||||
it('should invoke lifecycle methods onChanges > onInit > onCheck',
|
it('should invoke lifecycle methods onChange > onInit > onCheck > onAllChangesDone',
|
||||||
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
inject([TestBed, AsyncTestCompleter], (tb, async) => {
|
||||||
tb.overrideView(
|
tb.overrideView(
|
||||||
MyComp,
|
MyComp,
|
||||||
@ -35,11 +43,18 @@ export function main() {
|
|||||||
var dir = view.rawView.elementInjectors[0].get(LifecycleDir);
|
var dir = view.rawView.elementInjectors[0].get(LifecycleDir);
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(dir.log).toEqual(["onChanges", "onInit", "onCheck"]);
|
expect(dir.log).toEqual(["onChange", "onInit", "onCheck", "onAllChangesDone"]);
|
||||||
|
|
||||||
view.detectChanges();
|
view.detectChanges();
|
||||||
|
|
||||||
expect(dir.log).toEqual(["onChanges", "onInit", "onCheck", "onCheck"]);
|
expect(dir.log).toEqual([
|
||||||
|
"onChange",
|
||||||
|
"onInit",
|
||||||
|
"onCheck",
|
||||||
|
"onAllChangesDone",
|
||||||
|
"onCheck",
|
||||||
|
"onAllChangesDone"
|
||||||
|
]);
|
||||||
|
|
||||||
async.done();
|
async.done();
|
||||||
});
|
});
|
||||||
@ -48,18 +63,24 @@ export function main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Directive({selector: "[lifecycle]", properties: ['field'], lifecycle: [onChange, onCheck, onInit]})
|
@Directive({
|
||||||
|
selector: "[lifecycle]",
|
||||||
|
properties: ['field'],
|
||||||
|
lifecycle: [onChange, onCheck, onInit, onAllChangesDone]
|
||||||
|
})
|
||||||
class LifecycleDir {
|
class LifecycleDir {
|
||||||
field;
|
field;
|
||||||
log: List<string>;
|
log: List<string>;
|
||||||
|
|
||||||
constructor() { this.log = []; }
|
constructor() { this.log = []; }
|
||||||
|
|
||||||
onChange(_) { ListWrapper.push(this.log, "onChanges"); }
|
onChange(_) { ListWrapper.push(this.log, "onChange"); }
|
||||||
|
|
||||||
onInit() { ListWrapper.push(this.log, "onInit"); }
|
onInit() { ListWrapper.push(this.log, "onInit"); }
|
||||||
|
|
||||||
onCheck() { ListWrapper.push(this.log, "onCheck"); }
|
onCheck() { ListWrapper.push(this.log, "onCheck"); }
|
||||||
|
|
||||||
|
onAllChangesDone() { ListWrapper.push(this.log, "onAllChangesDone"); }
|
||||||
}
|
}
|
||||||
|
|
||||||
@Component({selector: 'my-comp'})
|
@Component({selector: 'my-comp'})
|
||||||
|
Reference in New Issue
Block a user