iSharkFly-Docs/Angular-Docs-Cn
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(lifecycle): prefix lifecycle methods with "ng"

Browse Source 
BREAKING CHANGE:
Previously, components that would implement lifecycle interfaces would include methods
like "onChanges" or "afterViewInit." Given that components were at risk of using such
names without realizing that Angular would call the methods at different points of
the component lifecycle. This change adds an "ng" prefix to all lifecycle hook methods,
far reducing the risk of an accidental name collision.

To fix, just rename these methods:
 * onInit
 * onDestroy
 * doCheck
 * onChanges
 * afterContentInit
 * afterContentChecked
 * afterViewInit
 * afterViewChecked
 * _Router Hooks_
 * onActivate
 * onReuse
 * onDeactivate
 * canReuse
 * canDeactivate

To:
 * ngOnInit,
 * ngOnDestroy,
 * ngDoCheck,
 * ngOnChanges,
 * ngAfterContentInit,
 * ngAfterContentChecked,
 * ngAfterViewInit,
 * ngAfterViewChecked
 * _Router Hooks_
 * routerOnActivate
 * routerOnReuse
 * routerOnDeactivate
 * routerCanReuse
 * routerCanDeactivate

The names of lifecycle interfaces and enums have not changed, though interfaces
have been updated to reflect the new method names.

Closes #5036
This commit is contained in:
Jeff Cross
2015-11-30 16:40:50 -08:00
committed by vsavkin
parent 4215afc639
commit 604c8bbad5
63 changed files with 618 additions and 583 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/angular1_router/src/ng_outlet.ts
+12 -12
View File
@@ -106,21 +106,21 @@ function ngOutletDirective($animate, $q: ng.IQService, $router) {
let next = $q.when(true);
let previousInstruction = this.currentInstruction;
this.currentInstruction = instruction;
if (this.currentController && this.currentController.$onReuse) {
if (this.currentController && this.currentController.$routerOnReuse) {
next = $q.when(
this.currentController.$onReuse(this.currentInstruction, previousInstruction));
this.currentController.$routerOnReuse(this.currentInstruction, previousInstruction));
}
return next;
}
canReuse(nextInstruction) {
routerCanReuse(nextInstruction) {
let result;
if (!this.currentInstruction ||
this.currentInstruction.componentType !== nextInstruction.componentType) {
result = false;
} else if (this.currentController && this.currentController.$canReuse) {
result = this.currentController.$canReuse(nextInstruction, this.currentInstruction);
} else if (this.currentController && this.currentController.$routerCanReuse) {
result = this.currentController.$routerCanReuse(nextInstruction, this.currentInstruction);
} else {
result = nextInstruction === this.currentInstruction ||
angular.equals(nextInstruction.params, this.currentInstruction.params);
@@ -128,18 +128,18 @@ function ngOutletDirective($animate, $q: ng.IQService, $router) {
return $q.when(result);
}
canDeactivate(instruction) {
if (this.currentController && this.currentController.$canDeactivate) {
routerCanDeactivate(instruction) {
if (this.currentController && this.currentController.$routerCanDeactivate) {
return $q.when(
this.currentController.$canDeactivate(instruction, this.currentInstruction));
this.currentController.$routerCanDeactivate(instruction, this.currentInstruction));
}
return $q.when(true);
}
deactivate(instruction) {
if (this.currentController && this.currentController.$onDeactivate) {
if (this.currentController && this.currentController.$routerOnDeactivate) {
return $q.when(
this.currentController.$onDeactivate(instruction, this.currentInstruction));
this.currentController.$routerOnDeactivate(instruction, this.currentInstruction));
}
return $q.when();
}
@@ -172,8 +172,8 @@ function ngOutletDirective($animate, $q: ng.IQService, $router) {
// by debug mode
this.currentController = this.currentElement.children().eq(0).controller(componentName);
if (this.currentController && this.currentController.$onActivate) {
return this.currentController.$onActivate(instruction, previousInstruction);
if (this.currentController && this.currentController.$routerOnActivate) {
return this.currentController.$routerOnActivate(instruction, previousInstruction);
}
return $q.when();
}
modules/angular1_router/test/integration/animation_spec.js
Vendored
+1 -1
View File
@@ -70,7 +70,7 @@ describe('ngOutlet animations', function () {
function registerComponent(name, options) {
var controller = options.controller || function () {};
['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) {
['$routerOnActivate', '$routerOnDeactivate', '$routerOnReuse', '$routerCanReuse', '$routerCanDeactivate'].forEach(function (hookName) {
if (options[hookName]) {
controller.prototype[hookName] = options[hookName];
}
modules/angular1_router/test/integration/lifecycle_hook_spec.js
Vendored
+25 -25
View File
@@ -35,7 +35,7 @@ describe('Navigation lifecycle', function () {
var spy = jasmine.createSpy('activate');
registerComponent('activateCmp', {
template: '<p>hello</p>',
$onActivate: spy
$routerOnActivate: spy
});
$router.config([
@@ -53,7 +53,7 @@ describe('Navigation lifecycle', function () {
it('should pass instruction into the activate hook of a controller', function () {
var spy = jasmine.createSpy('activate');
registerComponent('userCmp', {
$onActivate: spy
$routerOnActivate: spy
});
$router.config([
@@ -72,7 +72,7 @@ describe('Navigation lifecycle', function () {
var spy = jasmine.createSpy('activate');
var activate = registerComponent('activateCmp', {
template: 'hi',
$onActivate: spy
$routerOnActivate: spy
});
$router.config([
@@ -113,7 +113,7 @@ describe('Navigation lifecycle', function () {
it('should run the deactivate hook of controllers', function () {
var spy = jasmine.createSpy('deactivate');
registerComponent('deactivateCmp', {
$onDeactivate: spy
$routerOnDeactivate: spy
});
$router.config([
@@ -133,7 +133,7 @@ describe('Navigation lifecycle', function () {
it('should pass instructions into the deactivate hook of controllers', function () {
var spy = jasmine.createSpy('deactivate');
registerComponent('deactivateCmp', {
$onDeactivate: spy
$routerOnDeactivate: spy
});
$router.config([
@@ -155,13 +155,13 @@ describe('Navigation lifecycle', function () {
var log = [];
registerComponent('activateCmp', {
$onActivate: function () {
$routerOnActivate: function () {
log.push('activate');
}
});
registerComponent('deactivateCmp', {
$onDeactivate: function () {
$routerOnDeactivate: function () {
log.push('deactivate');
}
});
@@ -180,7 +180,7 @@ describe('Navigation lifecycle', function () {
expect(log).toEqual(['deactivate', 'activate']);
});
it('should reuse a component when the canReuse hook returns true', function () {
it('should reuse a component when the routerCanReuse hook returns true', function () {
var log = [];
var cmpInstanceCount = 0;
@@ -195,10 +195,10 @@ describe('Navigation lifecycle', function () {
{path: '/b', component: 'twoCmp'}
],
controller: ReuseCmp,
$canReuse: function () {
$routerCanReuse: function () {
return true;
},
$onReuse: function (next, prev) {
$routerOnReuse: function (next, prev) {
log.push('reuse: ' + prev.urlPath + ' -> ' + next.urlPath);
}
});
@@ -223,7 +223,7 @@ describe('Navigation lifecycle', function () {
});
it('should not reuse a component when the canReuse hook returns false', function () {
it('should not reuse a component when the routerCanReuse hook returns false', function () {
var log = [];
var cmpInstanceCount = 0;
@@ -237,10 +237,10 @@ describe('Navigation lifecycle', function () {
{path: '/b', component: 'twoCmp'}
],
controller: NeverReuseCmp,
$canReuse: function () {
$routerCanReuse: function () {
return false;
},
$onReuse: function (next, prev) {
$routerOnReuse: function (next, prev) {
log.push('reuse: ' + prev.urlPath + ' -> ' + next.urlPath);
}
});
@@ -271,7 +271,7 @@ describe('Navigation lifecycle', function () {
var spy = jasmine.createSpy('activate');
registerComponent('activateCmp', {
$canActivate: canActivateSpy,
$onActivate: spy
$routerOnActivate: spy
});
$router.config([
@@ -293,7 +293,7 @@ describe('Navigation lifecycle', function () {
registerComponent('activateCmp', {
template: 'hi',
$canActivate: canActivateSpy,
$onActivate: activateSpy
$routerOnActivate: activateSpy
});
$router.config([
@@ -317,7 +317,7 @@ describe('Navigation lifecycle', function () {
$canActivate: function () {
return $q.when(true);
},
$onActivate: spy
$routerOnActivate: spy
});
$router.config([
@@ -356,10 +356,10 @@ describe('Navigation lifecycle', function () {
}));
it('should not navigate when canDeactivate returns false', function () {
it('should not navigate when routerCanDeactivate returns false', function () {
registerComponent('activateCmp', {
template: 'hi',
$canDeactivate: function () {
$routerCanDeactivate: function () {
return false;
}
});
@@ -380,10 +380,10 @@ describe('Navigation lifecycle', function () {
});
it('should navigate when canDeactivate returns true', function () {
it('should navigate when routerCanDeactivate returns true', function () {
registerComponent('activateCmp', {
template: 'hi',
$canDeactivate: function () {
$routerCanDeactivate: function () {
return true;
}
});
@@ -411,7 +411,7 @@ describe('Navigation lifecycle', function () {
$canActivate: function () {
return true;
},
$onActivate: spy
$routerOnActivate: spy
});
$router.config([
@@ -427,10 +427,10 @@ describe('Navigation lifecycle', function () {
});
it('should pass instructions into the canDeactivate hook of controllers', function () {
var spy = jasmine.createSpy('canDeactivate').and.returnValue(true);
it('should pass instructions into the routerCanDeactivate hook of controllers', function () {
var spy = jasmine.createSpy('routerCanDeactivate').and.returnValue(true);
registerComponent('deactivateCmp', {
$canDeactivate: spy
$routerCanDeactivate: spy
});
$router.config([
@@ -451,7 +451,7 @@ describe('Navigation lifecycle', function () {
function registerComponent(name, options) {
var controller = options.controller || function () {};
['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) {
['$routerOnActivate', '$routerOnDeactivate', '$routerOnReuse', '$routerCanReuse', '$routerCanDeactivate'].forEach(function (hookName) {
if (options[hookName]) {
controller.prototype[hookName] = options[hookName];
}
modules/angular1_router/test/integration/navigation_spec.js
Vendored
+1 -1
View File
@@ -230,7 +230,7 @@ describe('navigation', function () {
function registerComponent(name, options) {
var controller = options.controller || function () {};
['$onActivate', '$onDeactivate', '$onReuse', '$canReuse', '$canDeactivate'].forEach(function (hookName) {
['$routerOnActivate', '$routerOnDeactivate', '$routerOnReuse', '$routerCanReuse', '$routerCanDeactivate'].forEach(function (hookName) {
if (options[hookName]) {
controller.prototype[hookName] = options[hookName];
}
modules/angular2/docs/cheatsheet/lifecycle hooks.md
+11 -11
View File
@@ -10,40 +10,40 @@ The class constructor is called before any other lifecycle hook. Use it to injec
@cheatsheetItem
`onChanges(changeRecord) { ... }`|`onChanges(changeRecord)`
`ngOnChanges(changeRecord) { ... }`|`ngOnChanges(changeRecord)`
Called after every change to input properties and before processing content or child views.
@cheatsheetItem
`onInit() { ... }`|`onInit()`
Called after the constructor, initializing input properties, and the first call to onChanges.
`ngOnInit() { ... }`|`ngOnInit()`
Called after the constructor, initializing input properties, and the first call to ngOnChanges.
@cheatsheetItem
`doCheck() { ... }`|`doCheck()`
`ngDoCheck() { ... }`|`ngDoCheck()`
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
`afterContentInit() { ... }`|`afterContentInit()`
Called after onInit when the component's or directive's content has been initialized.
`ngAfterContentInit() { ... }`|`ngAfterContentInit()`
Called after ngOnInit when the component's or directive's content has been initialized.
@cheatsheetItem
`afterContentChecked() { ... }`|`afterContentChecked()`
`ngAfterContentChecked() { ... }`|`ngAfterContentChecked()`
Called after every check of the component's or directive's content.
@cheatsheetItem
`afterViewInit() { ... }`|`afterViewInit()`
Called after afterContentInit when the component's view has been initialized. Applies to components only.
`ngAfterViewInit() { ... }`|`ngAfterViewInit()`
Called after ngAfterContentInit when the component's view has been initialized. Applies to components only.
@cheatsheetItem
`afterViewChecked() { ... }`|`afterViewChecked()`
`ngAfterViewChecked() { ... }`|`ngAfterViewChecked()`
Called after every check of the component's view. Applies to components only.
@cheatsheetItem
`onDestroy() { ... }`|`onDestroy()`
`ngOnDestroy() { ... }`|`ngOnDestroy()`
Called once, before the instance is destroyed.
modules/angular2/docs/cheatsheet/routing.md
+9 -9
View File
@@ -31,25 +31,25 @@ A component decorator defining a function that the router should call first to d
@cheatsheetItem
`onActivate(nextInstruction, prevInstruction) { ... }`|`onActivate`
After navigating to a component, the router calls component's onActivate method (if defined).
`routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
After navigating to a component, the router calls component's routerOnActivate method (if defined).
@cheatsheetItem
`canReuse(nextInstruction, prevInstruction) { ... }`|`canReuse`
The router calls a component's canReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.
`routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
The router calls a component's routerCanReuse method (if defined) to determine whether to reuse the instance or destroy it and create a new instance. Should return a boolean or a promise.
@cheatsheetItem
`onReuse(nextInstruction, prevInstruction) { ... }`|`onReuse`
The router calls the component's onReuse method (if defined) when it re-uses a component instance.
`routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
@cheatsheetItem
`canDeactivate(nextInstruction, prevInstruction) { ... }`|`canDeactivate`
The router calls the canDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.
`routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
The router calls the routerCanDeactivate methods (if defined) of every component that would be removed after a navigation. The navigation proceeds if and only if all such methods return true or a promise that is resolved.
@cheatsheetItem
`onDeactivate(nextInstruction, prevInstruction) { ... }`|`onDeactivate`
`routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
Called before the directive is removed as the result of a route change. May return a promise that pauses removing the directive until the promise resolves.
modules/angular2/examples/router/ts/can_deactivate/can_deactivate_example.ts
+2 -2
View File
@@ -8,7 +8,7 @@ import {
APP_BASE_HREF
} from 'angular2/router';
// #docregion canDeactivate
// #docregion routerCanDeactivate
@Component({
selector: 'note-cmp',
template: `
@@ -22,7 +22,7 @@ class NoteCmp implements CanDeactivate {
constructor(params: RouteParams) { this.id = params.get('id'); }
canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
return confirm('Are you sure you want to leave?');
}
}
modules/angular2/examples/router/ts/can_deactivate/index.html
+1 -1
View File
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>Routing canDeactivate Lifecycle Example</title>
<title>Routing routerCanDeactivate Lifecycle Example</title>
<base href="/">
<script src="http://cdn.rawgit.com/google/traceur-compiler/90da568c7aa8e53ea362db1fc211fbb4f65b5e94/bin/traceur-runtime.js"></script>
modules/angular2/examples/router/ts/on_activate/on_activate_example.ts
+3 -3
View File
@@ -8,12 +8,12 @@ import {
} from 'angular2/router';
// #docregion onActivate
@Component({selector: 'my-cmp', template: `<div>onActivate: {{log}}</div>`})
// #docregion routerOnActivate
@Component({selector: 'my-cmp', template: `<div>routerOnActivate: {{log}}</div>`})
class MyCmp implements OnActivate {
log: string = '';
onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
routerOnActivate(next: ComponentInstruction, prev: ComponentInstruction) {
this.log = `Finished navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`;
}
}
modules/angular2/examples/router/ts/on_activate/on_activate_spec.ts
+3 -3
View File
@@ -17,18 +17,18 @@ describe('on activate example app', function() {
waitForElement('my-cmp');
expect(element(by.css('my-cmp')).getText())
.toContain('onActivate: Finished navigating from "null" to ""');
.toContain('routerOnActivate: Finished navigating from "null" to ""');
element(by.css('#param-link')).click();
waitForElement('my-cmp');
expect(element(by.css('my-cmp')).getText())
.toContain('onActivate: Finished navigating from "" to "1"');
.toContain('routerOnActivate: Finished navigating from "" to "1"');
browser.navigate().back();
waitForElement('my-cmp');
expect(element(by.css('my-cmp')).getText())
.toContain('onActivate: Finished navigating from "1" to ""');
.toContain('routerOnActivate: Finished navigating from "1" to ""');
});
});
modules/angular2/examples/router/ts/on_deactivate/on_deactivate_example.ts
+2 -2
View File
@@ -16,12 +16,12 @@ class LogService {
}
// #docregion onDeactivate
// #docregion routerOnDeactivate
@Component({selector: 'my-cmp', template: `<div>hello</div>`})
class MyCmp implements OnDeactivate {
constructor(private logService: LogService) {}
onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
routerOnDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
this.logService.addLog(
`Navigating from "${prev ? prev.urlPath : 'null'}" to "${next.urlPath}"`);
}
modules/angular2/examples/router/ts/reuse/reuse_example.ts
+2 -2
View File
@@ -24,9 +24,9 @@ class MyCmp implements CanReuse,
name: string;
constructor(params: RouteParams) { this.name = params.get('name') || 'NOBODY'; }
canReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
routerCanReuse(next: ComponentInstruction, prev: ComponentInstruction) { return true; }
onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
routerOnReuse(next: ComponentInstruction, prev: ComponentInstruction) {
this.name = next.params['name'];
}
}
modules/angular2/src/common/directives/ng_class.ts
+2 -2
View File
@@ -108,7 +108,7 @@ export class NgClass implements DoCheck, OnDestroy {
}
}
doCheck(): void {
ngDoCheck(): void {
if (isPresent(this._differ)) {
var changes = this._differ.diff(this._rawClass);
if (isPresent(changes)) {
@@ -121,7 +121,7 @@ export class NgClass implements DoCheck, OnDestroy {
}
}
onDestroy(): void { this._cleanupClasses(this._rawClass); }
ngOnDestroy(): void { this._cleanupClasses(this._rawClass); }
private _cleanupClasses(rawClassVal): void {
this._applyClasses(rawClassVal, true);
modules/angular2/src/common/directives/ng_for.ts
+1 -1
View File
@@ -81,7 +81,7 @@ export class NgFor implements DoCheck {
}
}
doCheck() {
ngDoCheck() {
if (isPresent(this._differ)) {
var changes = this._differ.diff(this._ngForOf);
if (isPresent(changes)) this._applyChanges(changes);
modules/angular2/src/common/directives/ng_style.ts
+1 -1
View File
@@ -75,7 +75,7 @@ export class NgStyle implements DoCheck {
}
}
doCheck() {
ngDoCheck() {
if (isPresent(this._differ)) {
var changes = this._differ.diff(this._rawStyle);
if (isPresent(changes)) {
modules/angular2/src/common/forms/directives/ng_control_group.ts
+2 -2
View File
@@ -87,9 +87,9 @@ export class NgControlGroup extends ControlContainer implements OnInit,
this._parent = parent;
}
onInit(): void { this.formDirective.addControlGroup(this); }
ngOnInit(): void { this.formDirective.addControlGroup(this); }
onDestroy(): void { this.formDirective.removeControlGroup(this); }
ngOnDestroy(): void { this.formDirective.removeControlGroup(this); }
/**
* Get the {@link ControlGroup} backing this binding.
modules/angular2/src/common/forms/directives/ng_control_name.ts
+2 -2
View File
@@ -114,7 +114,7 @@ export class NgControlName extends NgControl implements OnChanges,
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
onChanges(changes: {[key: string]: SimpleChange}) {
ngOnChanges(changes: {[key: string]: SimpleChange}) {
if (!this._added) {
this.formDirective.addControl(this);
this._added = true;
@@ -125,7 +125,7 @@ export class NgControlName extends NgControl implements OnChanges,
}
}
onDestroy(): void { this.formDirective.removeControl(this); }
ngOnDestroy(): void { this.formDirective.removeControl(this); }
viewToModelUpdate(newValue: any): void {
this.viewModel = newValue;
modules/angular2/src/common/forms/directives/ng_form_control.ts
+1 -1
View File
@@ -97,7 +97,7 @@ export class NgFormControl extends NgControl implements OnChanges {
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
onChanges(changes: {[key: string]: SimpleChange}): void {
ngOnChanges(changes: {[key: string]: SimpleChange}): void {
if (this._isControlChanged(changes)) {
setUpControl(this.form, this);
this.form.updateValueAndValidity({emitEvent: false});
modules/angular2/src/common/forms/directives/ng_form_model.ts
+1 -1
View File
@@ -113,7 +113,7 @@ export class NgFormModel extends ControlContainer implements Form,
super();
}
onChanges(changes: {[key: string]: SimpleChange}): void {
ngOnChanges(changes: {[key: string]: SimpleChange}): void {
if (StringMapWrapper.contains(changes, "form")) {
var sync = composeValidators(this._validators);
this.form.validator = Validators.compose([this.form.validator, sync]);
modules/angular2/src/common/forms/directives/ng_model.ts
+1 -1
View File
@@ -71,7 +71,7 @@ export class NgModel extends NgControl implements OnChanges {
this.valueAccessor = selectValueAccessor(this, valueAccessors);
}
onChanges(changes: {[key: string]: SimpleChange}) {
ngOnChanges(changes: {[key: string]: SimpleChange}) {
if (!this._added) {
setUpControl(this._control, this);
this._control.updateValueAndValidity({emitEvent: false});
modules/angular2/src/core/change_detection/change_detection_jit_generator.ts
+3 -3
View File
@@ -473,19 +473,19 @@ export class ChangeDetectorJITGenerator {
/** @internal */
_genOnCheck(r: ProtoRecord): string {
var br = r.bindingRecord;
return `if (!throwOnChange) ${this._names.getDirectiveName(br.directiveRecord.directiveIndex)}.doCheck();`;
return `if (!throwOnChange) ${this._names.getDirectiveName(br.directiveRecord.directiveIndex)}.ngDoCheck();`;
}
/** @internal */
_genOnInit(r: ProtoRecord): string {
var br = r.bindingRecord;
return `if (!throwOnChange && ${this._names.getStateName()} === ${this.changeDetectorStateVarName}.NeverChecked) ${this._names.getDirectiveName(br.directiveRecord.directiveIndex)}.onInit();`;
return `if (!throwOnChange && ${this._names.getStateName()} === ${this.changeDetectorStateVarName}.NeverChecked) ${this._names.getDirectiveName(br.directiveRecord.directiveIndex)}.ngOnInit();`;
}
/** @internal */
_genOnChange(r: ProtoRecord): string {
var br = r.bindingRecord;
return `if (!throwOnChange && ${CHANGES_LOCAL}) ${this._names.getDirectiveName(br.directiveRecord.directiveIndex)}.onChanges(${CHANGES_LOCAL});`;
return `if (!throwOnChange && ${CHANGES_LOCAL}) ${this._names.getDirectiveName(br.directiveRecord.directiveIndex)}.ngOnChanges(${CHANGES_LOCAL});`;
}
/** @internal */
modules/angular2/src/core/change_detection/codegen_logic_util.ts
+4 -4
View File
@@ -189,11 +189,11 @@ export class CodegenLogicUtil {
var dir = directiveRecords[i];
if (dir.callAfterContentInit) {
res.push(
`if(${this._names.getStateName()} ${eq} ${this._changeDetectorStateName}.NeverChecked) ${this._names.getDirectiveName(dir.directiveIndex)}.afterContentInit();`);
`if(${this._names.getStateName()} ${eq} ${this._changeDetectorStateName}.NeverChecked) ${this._names.getDirectiveName(dir.directiveIndex)}.ngAfterContentInit();`);
}
if (dir.callAfterContentChecked) {
res.push(`${this._names.getDirectiveName(dir.directiveIndex)}.afterContentChecked();`);
res.push(`${this._names.getDirectiveName(dir.directiveIndex)}.ngAfterContentChecked();`);
}
}
return res;
@@ -207,11 +207,11 @@ export class CodegenLogicUtil {
var dir = directiveRecords[i];
if (dir.callAfterViewInit) {
res.push(
`if(${this._names.getStateName()} ${eq} ${this._changeDetectorStateName}.NeverChecked) ${this._names.getDirectiveName(dir.directiveIndex)}.afterViewInit();`);
`if(${this._names.getStateName()} ${eq} ${this._changeDetectorStateName}.NeverChecked) ${this._names.getDirectiveName(dir.directiveIndex)}.ngAfterViewInit();`);
}
if (dir.callAfterViewChecked) {
res.push(`${this._names.getDirectiveName(dir.directiveIndex)}.afterViewChecked();`);
res.push(`${this._names.getDirectiveName(dir.directiveIndex)}.ngAfterViewChecked();`);
}
}
return res;
modules/angular2/src/core/change_detection/dynamic_change_detector.ts
+7 -7
View File
@@ -155,12 +155,12 @@ export class DynamicChangeDetector extends AbstractChangeDetector<any> {
if (proto.isLifeCycleRecord()) {
if (proto.name === "DoCheck" && !throwOnChange) {
this._getDirectiveFor(directiveRecord.directiveIndex).doCheck();
this._getDirectiveFor(directiveRecord.directiveIndex).ngDoCheck();
} else if (proto.name === "OnInit" && !throwOnChange &&
this.state == ChangeDetectorState.NeverChecked) {
this._getDirectiveFor(directiveRecord.directiveIndex).onInit();
this._getDirectiveFor(directiveRecord.directiveIndex).ngOnInit();
} else if (proto.name === "OnChanges" && isPresent(changes) && !throwOnChange) {
this._getDirectiveFor(directiveRecord.directiveIndex).onChanges(changes);
this._getDirectiveFor(directiveRecord.directiveIndex).ngOnChanges(changes);
}
} else if (proto.isSkipRecord()) {
protoIdx += this._computeSkipLength(protoIdx, proto, this.values);
@@ -195,11 +195,11 @@ export class DynamicChangeDetector extends AbstractChangeDetector<any> {
for (var i = dirs.length - 1; i >= 0; --i) {
var dir = dirs[i];
if (dir.callAfterContentInit && this.state == ChangeDetectorState.NeverChecked) {
this._getDirectiveFor(dir.directiveIndex).afterContentInit();
this._getDirectiveFor(dir.directiveIndex).ngAfterContentInit();
}
if (dir.callAfterContentChecked) {
this._getDirectiveFor(dir.directiveIndex).afterContentChecked();
this._getDirectiveFor(dir.directiveIndex).ngAfterContentChecked();
}
}
}
@@ -209,10 +209,10 @@ export class DynamicChangeDetector extends AbstractChangeDetector<any> {
for (var i = dirs.length - 1; i >= 0; --i) {
var dir = dirs[i];
if (dir.callAfterViewInit && this.state == ChangeDetectorState.NeverChecked) {
this._getDirectiveFor(dir.directiveIndex).afterViewInit();
this._getDirectiveFor(dir.directiveIndex).ngAfterViewInit();
}
if (dir.callAfterViewChecked) {
this._getDirectiveFor(dir.directiveIndex).afterViewChecked();
this._getDirectiveFor(dir.directiveIndex).ngAfterViewChecked();
}
}
}
modules/angular2/src/core/linker/directive_lifecycle_reflector.ts
+8 -8
View File
@@ -8,21 +8,21 @@ export function hasLifecycleHook(lcInterface: LifecycleHooks, token): boolean {
switch (lcInterface) {
case LifecycleHooks.AfterContentInit:
return !!proto.afterContentInit;
return !!proto.ngAfterContentInit;
case LifecycleHooks.AfterContentChecked:
return !!proto.afterContentChecked;
return !!proto.ngAfterContentChecked;
case LifecycleHooks.AfterViewInit:
return !!proto.afterViewInit;
return !!proto.ngAfterViewInit;
case LifecycleHooks.AfterViewChecked:
return !!proto.afterViewChecked;
return !!proto.ngAfterViewChecked;
case LifecycleHooks.OnChanges:
return !!proto.onChanges;
return !!proto.ngOnChanges;
case LifecycleHooks.DoCheck:
return !!proto.doCheck;
return !!proto.ngDoCheck;
case LifecycleHooks.OnDestroy:
return !!proto.onDestroy;
return !!proto.ngOnDestroy;
case LifecycleHooks.OnInit:
return !!proto.onInit;
return !!proto.ngOnInit;
default:
return false;
}
modules/angular2/src/core/linker/element_injector.ts
+16 -14
View File
@@ -49,6 +49,7 @@ import {QueryList} from './query_list';
import {reflector} from 'angular2/src/core/reflection/reflection';
import {SetterFn} from 'angular2/src/core/reflection/types';
import {EventConfig} from 'angular2/src/core/linker/event_config';
import {AfterViewChecked} from 'angular2/src/core/linker/interfaces';
import {PipeProvider} from 'angular2/src/core/pipes/pipe_provider';
import {LifecycleHooks} from './interfaces';
@@ -326,7 +327,8 @@ class _Context {
constructor(public element: any, public componentElement: any, public injector: any) {}
}
export class ElementInjector extends TreeNode<ElementInjector> implements DependencyProvider {
export class ElementInjector extends TreeNode<ElementInjector> implements DependencyProvider,
AfterViewChecked {
private _host: ElementInjector;
private _preBuiltObjects: PreBuiltObjects = null;
private _queryStrategy: _QueryStrategy;
@@ -564,9 +566,9 @@ export class ElementInjector extends TreeNode<ElementInjector> implements Depend
return isPresent(nestedView) ? nestedView.rootElementInjectors : [];
}
afterViewChecked(): void { this._queryStrategy.updateViewQueries(); }
ngAfterViewChecked(): void { this._queryStrategy.updateViewQueries(); }
afterContentChecked(): void { this._queryStrategy.updateContentQueries(); }
ngAfterContentChecked(): void { this._queryStrategy.updateContentQueries(); }
traverseAndSetQueriesAsDirty(): void {
var inj = this;
@@ -810,43 +812,43 @@ class ElementInjectorInlineStrategy implements _ElementInjectorStrategy {
if (p.provider0 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider0).callOnDestroy) {
i.obj0.onDestroy();
i.obj0.ngOnDestroy();
}
if (p.provider1 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider1).callOnDestroy) {
i.obj1.onDestroy();
i.obj1.ngOnDestroy();
}
if (p.provider2 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider2).callOnDestroy) {
i.obj2.onDestroy();
i.obj2.ngOnDestroy();
}
if (p.provider3 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider3).callOnDestroy) {
i.obj3.onDestroy();
i.obj3.ngOnDestroy();
}
if (p.provider4 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider4).callOnDestroy) {
i.obj4.onDestroy();
i.obj4.ngOnDestroy();
}
if (p.provider5 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider5).callOnDestroy) {
i.obj5.onDestroy();
i.obj5.ngOnDestroy();
}
if (p.provider6 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider6).callOnDestroy) {
i.obj6.onDestroy();
i.obj6.ngOnDestroy();
}
if (p.provider7 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider7).callOnDestroy) {
i.obj7.onDestroy();
i.obj7.ngOnDestroy();
}
if (p.provider8 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider8).callOnDestroy) {
i.obj8.onDestroy();
i.obj8.ngOnDestroy();
}
if (p.provider9 instanceof DirectiveProvider &&
(<DirectiveProvider>p.provider9).callOnDestroy) {
i.obj9.onDestroy();
i.obj9.ngOnDestroy();
}
}
@@ -936,7 +938,7 @@ class ElementInjectorDynamicStrategy implements _ElementInjectorStrategy {
for (var i = 0; i < p.providers.length; i++) {
if (p.providers[i] instanceof DirectiveProvider &&
(<DirectiveProvider>p.providers[i]).callOnDestroy) {
ist.objs[i].onDestroy();
ist.objs[i].ngOnDestroy();
}
}
}
modules/angular2/src/core/linker/interfaces.ts
+32 -32
View File
@@ -41,7 +41,7 @@ export var LIFECYCLE_HOOKS_VALUES = [
/**
* Implement this interface to get notified when any data-bound property of your directive changes.
*
* `onChanges` is called right after the data-bound properties have been checked and before view
* `ngOnChanges` is called right after the data-bound properties have been checked and before view
* and content children are checked if at least one of them has changed.
*
* The `changes` parameter contains an entry for each of the changed data-bound property. The key is
@@ -57,8 +57,8 @@ export var LIFECYCLE_HOOKS_VALUES = [
* class MyComponent implements OnChanges {
* @Input() myProp: any;
*
* onChanges(changes: {[propName: string]: SimpleChange}) {
* console.log('onChanges - myProp = ' + changes['myProp'].currentValue);
* ngOnChanges(changes: {[propName: string]: SimpleChange}) {
* console.log('ngOnChanges - myProp = ' + changes['myProp'].currentValue);
* }
* }
*
@@ -76,13 +76,13 @@ export var LIFECYCLE_HOOKS_VALUES = [
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange}); }
export interface OnChanges { ngOnChanges(changes: {[key: string]: SimpleChange}); }
/**
* Implement this interface to execute custom initialization logic after your directive's
* data-bound properties have been initialized.
*
* `onInit` is called right after the directive's data-bound properties have been checked for the
* `ngOnInit` is called right after the directive's data-bound properties have been checked for the
* first time, and before any of its children have been checked. It is invoked only once when the
* directive is instantiated.
*
@@ -94,12 +94,12 @@ export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange});
* template: `<p>my-component</p>`
* })
* class MyComponent implements OnInit, OnDestroy {
* onInit() {
* console.log('onInit');
* ngOnInit() {
* console.log('ngOnInit');
* }
*
* onDestroy() {
* console.log('onDestroy');
* ngOnDestroy() {
* console.log('ngOnDestroy');
* }
* }
*
@@ -119,29 +119,29 @@ export interface OnChanges { onChanges(changes: {[key: string]: SimpleChange});
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface OnInit { onInit(); }
export interface OnInit { ngOnInit(); }
/**
* Implement this interface to override the default change detection algorithm for your directive.
*
* `doCheck` gets called to check the changes in the directives instead of the default algorithm.
* `ngDoCheck` gets called to check the changes in the directives instead of the default algorithm.
*
* The default change detection algorithm looks for differences by comparing bound-property values
* by reference across change detection runs. When `DoCheck` is implemented, the default algorithm
* is disabled and `doCheck` is responsible for checking for changes.
* is disabled and `ngDoCheck` is responsible for checking for changes.
*
* Implementing this interface allows improving performance by using insights about the component,
* its implementation and data types of its properties.
*
* Note that a directive should not implement both `DoCheck` and {@link OnChanges} at the same time.
* `onChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
* have to be handled from within the `doCheck` callback.
* `ngOnChanges` would not be called when a directive implements `DoCheck`. Reaction to the changes
* have to be handled from within the `ngDoCheck` callback.
*
* Use {@link KeyValueDiffers} and {@link IterableDiffers} to add your custom check mechanisms.
*
* ### Example ([live demo](http://plnkr.co/edit/QpnIlF0CR2i5bcYbHEUJ?p=preview))
*
* In the following example `doCheck` uses an {@link IterableDiffers} to detect the updates to the
* In the following example `ngDoCheck` uses an {@link IterableDiffers} to detect the updates to the
* array `list`:
*
* ```typescript
@@ -163,7 +163,7 @@ export interface OnInit { onInit(); }
* this.differ = differs.find([]).create(null);
* }
*
* doCheck() {
* ngDoCheck() {
* var changes = this.differ.diff(this.list);
*
* if (changes) {
@@ -186,12 +186,12 @@ export interface OnInit { onInit(); }
* }
* ```
*/
export interface DoCheck { doCheck(); }
export interface DoCheck { ngDoCheck(); }
/**
* Implement this interface to get notified when your directive is destroyed.
*
* `onDestroy` callback is typically used for any custom cleanup that needs to occur when the
* `ngOnDestroy` callback is typically used for any custom cleanup that needs to occur when the
* instance is destroyed
*
* ### Example ([live example](http://plnkr.co/edit/1MBypRryXd64v4pV03Yn?p=preview))
@@ -202,12 +202,12 @@ export interface DoCheck { doCheck(); }
* template: `<p>my-component</p>`
* })
* class MyComponent implements OnInit, OnDestroy {
* onInit() {
* console.log('onInit');
* ngOnInit() {
* console.log('ngOnInit');
* }
*
* onDestroy() {
* console.log('onDestroy');
* ngOnDestroy() {
* console.log('ngOnDestroy');
* }
* }
*
@@ -227,7 +227,7 @@ export interface DoCheck { doCheck(); }
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface OnDestroy { onDestroy(); }
export interface OnDestroy { ngOnDestroy(); }
/**
* Implement this interface to get notified when your directive's content has been fully
@@ -256,7 +256,7 @@ export interface OnDestroy { onDestroy(); }
* console.log(this.getMessage(this.contentChild));
* }
*
* afterContentInit() {
* ngAfterContentInit() {
* // contentChild is updated after the content has been checked
* console.log('AfterContentInit: ' + this.getMessage(this.contentChild));
* }
@@ -280,7 +280,7 @@ export interface OnDestroy { onDestroy(); }
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface AfterContentInit { afterContentInit(); }
export interface AfterContentInit { ngAfterContentInit(); }
/**
* Implement this interface to get notified after every check of your directive's content.
@@ -302,7 +302,7 @@ export interface AfterContentInit { afterContentInit(); }
* console.log(this.getMessage(this.contentChild));
* }
*
* afterContentChecked() {
* ngAfterContentChecked() {
* // contentChild is updated after the content has been checked
* console.log('AfterContentChecked: ' + this.getMessage(this.contentChild));
* }
@@ -328,7 +328,7 @@ export interface AfterContentInit { afterContentInit(); }
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface AfterContentChecked { afterContentChecked(); }
export interface AfterContentChecked { ngAfterContentChecked(); }
/**
* Implement this interface to get notified when your component's view has been fully initialized.
@@ -354,9 +354,9 @@ export interface AfterContentChecked { afterContentChecked(); }
* console.log(this.getMessage(this.viewChild));
* }
*
* afterViewInit() {
* ngAfterViewInit() {
* // viewChild is updated after the view has been initialized
* console.log('afterViewInit: ' + this.getMessage(this.viewChild));
* console.log('ngAfterViewInit: ' + this.getMessage(this.viewChild));
* }
*
* private getMessage(cmp: ChildComponent): string {
@@ -375,7 +375,7 @@ export interface AfterContentChecked { afterContentChecked(); }
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface AfterViewInit { afterViewInit(); }
export interface AfterViewInit { ngAfterViewInit(); }
/**
* Implement this interface to get notified after every check of your component's view.
@@ -404,7 +404,7 @@ export interface AfterViewInit { afterViewInit(); }
* console.log(this.getMessage(this.viewChild));
* }
*
* afterViewChecked() {
* ngAfterViewChecked() {
* // viewChild is updated after the view has been checked
* console.log('AfterViewChecked: ' + this.getMessage(this.viewChild));
* }
@@ -425,4 +425,4 @@ export interface AfterViewInit { afterViewInit(); }
* bootstrap(App).catch(err => console.error(err));
* ```
*/
export interface AfterViewChecked { afterViewChecked(); }
export interface AfterViewChecked { ngAfterViewChecked(); }
modules/angular2/src/core/linker/view.ts
+2 -2
View File
@@ -182,7 +182,7 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
var eiCount = this.proto.elementBinders.length;
var ei = this.elementInjectors;
for (var i = eiCount - 1; i >= 0; i--) {
if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].afterContentChecked();
if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].ngAfterContentChecked();
}
}
@@ -190,7 +190,7 @@ export class AppView implements ChangeDispatcher, RenderEventDispatcher {
var eiCount = this.proto.elementBinders.length;
var ei = this.elementInjectors;
for (var i = eiCount - 1; i >= 0; i--) {
if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].afterViewChecked();
if (isPresent(ei[i + this.elementOffset])) ei[i + this.elementOffset].ngAfterViewChecked();
}
}
modules/angular2/src/core/linker/view_manager.ts
+2 -2
View File
@@ -97,7 +97,7 @@ export abstract class AppViewManager {
* Parent (<some-component></some-component>)
* `
* })
* class MyApp {
* class MyApp implements OnDestroy {
* viewRef: ng.ViewRef;
*
* constructor(public appViewManager: ng.AppViewManager, compiler: ng.Compiler) {
@@ -106,7 +106,7 @@ export abstract class AppViewManager {
* })
* }
*
* onDestroy() {
* ngOnDestroy() {
* this.appViewManager.destroyRootHostView(this.viewRef);
* this.viewRef = null;
* }
modules/angular2/src/core/metadata.ts
+8 -8
View File
@@ -1108,7 +1108,7 @@ export var Query: QueryFactory = makeParamDecorator(QueryMetadata);
/**
* Configures a content query.
*
* Content queries are set before the `afterContentInit` callback is called.
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* ### Example
*
@@ -1119,7 +1119,7 @@ export var Query: QueryFactory = makeParamDecorator(QueryMetadata);
* class SomeDir {
* @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
*
* afterContentInit() {
* ngAfterContentInit() {
* // contentChildren is set
* }
* }
@@ -1131,7 +1131,7 @@ export var ContentChildren: ContentChildrenFactory = makePropDecorator(ContentCh
/**
* Configures a content query.
*
* Content queries are set before the `afterContentInit` callback is called.
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* ### Example
*
@@ -1142,7 +1142,7 @@ export var ContentChildren: ContentChildrenFactory = makePropDecorator(ContentCh
* class SomeDir {
* @ContentChild(ChildDirective) contentChild;
*
* afterContentInit() {
* ngAfterContentInit() {
* // contentChild is set
* }
* }
@@ -1154,7 +1154,7 @@ export var ContentChild: ContentChildFactory = makePropDecorator(ContentChildMet
/**
* Configures a view query.
*
* View queries are set before the `afterViewInit` callback is called.
* View queries are set before the `ngAfterViewInit` callback is called.
*
* ### Example
*
@@ -1167,7 +1167,7 @@ export var ContentChild: ContentChildFactory = makePropDecorator(ContentChildMet
* class SomeDir {
* @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
*
* afterViewInit() {
* ngAfterViewInit() {
* // viewChildren is set
* }
* }
@@ -1179,7 +1179,7 @@ export var ViewChildren: ViewChildrenFactory = makePropDecorator(ViewChildrenMet
/**
* Configures a view query.
*
* View queries are set before the `afterViewInit` callback is called.
* View queries are set before the `ngAfterViewInit` callback is called.
*
* ### Example
*
@@ -1192,7 +1192,7 @@ export var ViewChildren: ViewChildrenFactory = makePropDecorator(ViewChildrenMet
* class SomeDir {
* @ViewChild(ItemDirective) viewChild:ItemDirective;
*
* afterViewInit() {
* ngAfterViewInit() {
* // viewChild is set
* }
* }
modules/angular2/src/core/metadata/di.ts
+8 -8
View File
@@ -194,7 +194,7 @@ export class QueryMetadata extends DependencyMetadata {
/**
* Configures a content query.
*
* Content queries are set before the `afterContentInit` callback is called.
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* ### Example
*
@@ -205,7 +205,7 @@ export class QueryMetadata extends DependencyMetadata {
* class SomeDir {
* @ContentChildren(ChildDirective) contentChildren: QueryList<ChildDirective>;
*
* afterContentInit() {
* ngAfterContentInit() {
* // contentChildren is set
* }
* }
@@ -222,7 +222,7 @@ export class ContentChildrenMetadata extends QueryMetadata {
/**
* Configures a content query.
*
* Content queries are set before the `afterContentInit` callback is called.
* Content queries are set before the `ngAfterContentInit` callback is called.
*
* ### Example
*
@@ -233,7 +233,7 @@ export class ContentChildrenMetadata extends QueryMetadata {
* class SomeDir {
* @ContentChild(ChildDirective) contentChild;
*
* afterContentInit() {
* ngAfterContentInit() {
* // contentChild is set
* }
* }
@@ -296,7 +296,7 @@ export class ViewQueryMetadata extends QueryMetadata {
/**
* Configures a view query.
*
* View queries are set before the `afterViewInit` callback is called.
* View queries are set before the `ngAfterViewInit` callback is called.
*
* ### Example
*
@@ -309,7 +309,7 @@ export class ViewQueryMetadata extends QueryMetadata {
* class SomeDir {
* @ViewChildren(ItemDirective) viewChildren: QueryList<ItemDirective>;
*
* afterViewInit() {
* ngAfterViewInit() {
* // viewChildren is set
* }
* }
@@ -323,7 +323,7 @@ export class ViewChildrenMetadata extends ViewQueryMetadata {
/**
* Configures a view query.
*
* View queries are set before the `afterViewInit` callback is called.
* View queries are set before the `ngAfterViewInit` callback is called.
*
* ### Example
*
@@ -336,7 +336,7 @@ export class ViewChildrenMetadata extends ViewQueryMetadata {
* class SomeDir {
* @ViewChild(ItemDirective) viewChild:ItemDirective;
*
* afterViewInit() {
* ngAfterViewInit() {
* // viewChild is set
* }
* }

Some files were not shown because too many files have changed in this diff Show More