refactor(lifecycle): prefix lifecycle methods with "ng"
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:
@@ -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?');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}"`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 ""');
|
||||
});
|
||||
});
|
||||
|
||||
@@ -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}"`);
|
||||
}
|
||||
|
||||
@@ -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'];
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user