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:
@@ -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);
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
@@ -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.
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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});
|
||||
|
||||
@@ -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]);
|
||||
|
||||
@@ -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});
|
||||
|
||||
@@ -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 */
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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(); }
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
* }
|
||||
|
||||
@@ -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
|
||||
* }
|
||||
* }
|
||||
|
||||
@@ -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
|
||||
* }
|
||||
* }
|
||||
|
||||
@@ -720,8 +720,8 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
/**
|
||||
* Configures the queries that will be injected into the directive.
|
||||
*
|
||||
* Content queries are set before the `afterContentInit` callback is called.
|
||||
* View queries are set before the `afterViewInit` callback is called.
|
||||
* Content queries are set before the `ngAfterContentInit` callback is called.
|
||||
* View queries are set before the `ngAfterViewInit` callback is called.
|
||||
*
|
||||
* ### Example
|
||||
*
|
||||
@@ -739,11 +739,11 @@ export class DirectiveMetadata extends InjectableMetadata {
|
||||
* contentChildren: QueryList<ChildDirective>,
|
||||
* viewChildren: QueryList<ChildDirective>
|
||||
*
|
||||
* afterContentInit() {
|
||||
* ngAfterContentInit() {
|
||||
* // contentChildren is set
|
||||
* }
|
||||
*
|
||||
* afterViewInit() {
|
||||
* ngAfterViewInit() {
|
||||
* // viewChildren is set
|
||||
* }
|
||||
* }
|
||||
|
||||
@@ -8,34 +8,37 @@ var __ignore_me = global;
|
||||
|
||||
|
||||
/**
|
||||
* Defines route lifecycle method `onActivate`, which is called by the router at the end of a
|
||||
* Defines route lifecycle method `routerOnActivate`, which is called by the router at the end of a
|
||||
* successful route navigation.
|
||||
*
|
||||
* For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
|
||||
* will be called depending on the result of {@link CanReuse}.
|
||||
*
|
||||
* The `onActivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
|
||||
* The `routerOnActivate` hook is called with two {@link ComponentInstruction}s as parameters, the
|
||||
* first
|
||||
* representing the current route being navigated to, and the second parameter representing the
|
||||
* previous route or `null`.
|
||||
*
|
||||
* If `onActivate` returns a promise, the route change will wait until the promise settles to
|
||||
* If `routerOnActivate` returns a promise, the route change will wait until the promise settles to
|
||||
* instantiate and activate child components.
|
||||
*
|
||||
* ### Example
|
||||
* {@example router/ts/on_activate/on_activate_example.ts region='onActivate'}
|
||||
* {@example router/ts/on_activate/on_activate_example.ts region='routerOnActivate'}
|
||||
*/
|
||||
export interface OnActivate {
|
||||
onActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
routerOnActivate(nextInstruction: ComponentInstruction,
|
||||
prevInstruction: ComponentInstruction): any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines route lifecycle method `onReuse`, which is called by the router at the end of a
|
||||
* Defines route lifecycle method `routerOnReuse`, which is called by the router at the end of a
|
||||
* successful route navigation when {@link CanReuse} is implemented and returns or resolves to true.
|
||||
*
|
||||
* For a single component's navigation, only one of either {@link OnActivate} or {@link OnReuse}
|
||||
* will be called, depending on the result of {@link CanReuse}.
|
||||
*
|
||||
* The `onReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
|
||||
* The `routerOnReuse` hook is called with two {@link ComponentInstruction}s as parameters, the
|
||||
* first
|
||||
* representing the current route being navigated to, and the second parameter representing the
|
||||
* previous route or `null`.
|
||||
*
|
||||
@@ -43,65 +46,73 @@ export interface OnActivate {
|
||||
* {@example router/ts/reuse/reuse_example.ts region='reuseCmp'}
|
||||
*/
|
||||
export interface OnReuse {
|
||||
onReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
routerOnReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines route lifecycle method `onDeactivate`, which is called by the router before destroying
|
||||
* Defines route lifecycle method `routerOnDeactivate`, which is called by the router before
|
||||
* destroying
|
||||
* a component as part of a route change.
|
||||
*
|
||||
* The `onDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the first
|
||||
* The `routerOnDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the
|
||||
* first
|
||||
* representing the current route being navigated to, and the second parameter representing the
|
||||
* previous route.
|
||||
*
|
||||
* If `onDeactivate` returns a promise, the route change will wait until the promise settles.
|
||||
* If `routerOnDeactivate` returns a promise, the route change will wait until the promise settles.
|
||||
*
|
||||
* ### Example
|
||||
* {@example router/ts/on_deactivate/on_deactivate_example.ts region='onDeactivate'}
|
||||
* {@example router/ts/on_deactivate/on_deactivate_example.ts region='routerOnDeactivate'}
|
||||
*/
|
||||
export interface OnDeactivate {
|
||||
onDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
routerOnDeactivate(nextInstruction: ComponentInstruction,
|
||||
prevInstruction: ComponentInstruction): any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines route lifecycle method `canReuse`, which is called by the router to determine whether a
|
||||
* Defines route lifecycle method `routerCanReuse`, which is called by the router to determine
|
||||
* whether a
|
||||
* component should be reused across routes, or whether to destroy and instantiate a new component.
|
||||
*
|
||||
* The `canReuse` hook is called with two {@link ComponentInstruction}s as parameters, the first
|
||||
* The `routerCanReuse` hook is called with two {@link ComponentInstruction}s as parameters, the
|
||||
* first
|
||||
* representing the current route being navigated to, and the second parameter representing the
|
||||
* previous route.
|
||||
*
|
||||
* If `canReuse` returns or resolves to `true`, the component instance will be reused and the
|
||||
* {@link OnDeactivate} hook will be run. If `canReuse` returns or resolves to `false`, a new
|
||||
* If `routerCanReuse` returns or resolves to `true`, the component instance will be reused and the
|
||||
* {@link OnDeactivate} hook will be run. If `routerCanReuse` returns or resolves to `false`, a new
|
||||
* component will be instantiated, and the existing component will be deactivated and removed as
|
||||
* part of the navigation.
|
||||
*
|
||||
* If `canReuse` throws or rejects, the navigation will be cancelled.
|
||||
* If `routerCanReuse` throws or rejects, the navigation will be cancelled.
|
||||
*
|
||||
* ### Example
|
||||
* {@example router/ts/reuse/reuse_example.ts region='reuseCmp'}
|
||||
*/
|
||||
export interface CanReuse {
|
||||
canReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
routerCanReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
}
|
||||
|
||||
/**
|
||||
* Defines route lifecycle method `canDeactivate`, which is called by the router to determine
|
||||
* Defines route lifecycle method `routerCanDeactivate`, which is called by the router to determine
|
||||
* if a component can be removed as part of a navigation.
|
||||
*
|
||||
* The `canDeactivate` hook is called with two {@link ComponentInstruction}s as parameters, the
|
||||
* The `routerCanDeactivate` hook is called with two {@link ComponentInstruction}s as parameters,
|
||||
* the
|
||||
* first representing the current route being navigated to, and the second parameter
|
||||
* representing the previous route.
|
||||
*
|
||||
* If `canDeactivate` returns or resolves to `false`, the navigation is cancelled. If it returns or
|
||||
* If `routerCanDeactivate` returns or resolves to `false`, the navigation is cancelled. If it
|
||||
* returns or
|
||||
* resolves to `true`, then the navigation continues, and the component will be deactivated
|
||||
* (the {@link OnDeactivate} hook will be run) and removed.
|
||||
*
|
||||
* If `canDeactivate` throws or rejects, the navigation is also cancelled.
|
||||
* If `routerCanDeactivate` throws or rejects, the navigation is also cancelled.
|
||||
*
|
||||
* ### Example
|
||||
* {@example router/ts/can_deactivate/can_deactivate_example.ts region='canDeactivate'}
|
||||
* {@example router/ts/can_deactivate/can_deactivate_example.ts region='routerCanDeactivate'}
|
||||
*/
|
||||
export interface CanDeactivate {
|
||||
canDeactivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
|
||||
routerCanDeactivate(nextInstruction: ComponentInstruction,
|
||||
prevInstruction: ComponentInstruction): any;
|
||||
}
|
||||
|
||||
@@ -9,11 +9,11 @@ import {Promise} from 'angular2/src/facade/async';
|
||||
import {ComponentInstruction} from './instruction';
|
||||
|
||||
export {
|
||||
canReuse,
|
||||
canDeactivate,
|
||||
onActivate,
|
||||
onReuse,
|
||||
onDeactivate
|
||||
routerCanReuse,
|
||||
routerCanDeactivate,
|
||||
routerOnActivate,
|
||||
routerOnReuse,
|
||||
routerOnDeactivate
|
||||
} from './lifecycle_annotations_impl';
|
||||
|
||||
/**
|
||||
|
||||
@@ -10,9 +10,13 @@ export class CanActivate {
|
||||
constructor(public fn: Function) {}
|
||||
}
|
||||
|
||||
export const canReuse: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("canReuse"));
|
||||
export const canDeactivate: RouteLifecycleHook =
|
||||
CONST_EXPR(new RouteLifecycleHook("canDeactivate"));
|
||||
export const onActivate: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("onActivate"));
|
||||
export const onReuse: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("onReuse"));
|
||||
export const onDeactivate: RouteLifecycleHook = CONST_EXPR(new RouteLifecycleHook("onDeactivate"));
|
||||
export const routerCanReuse: RouteLifecycleHook =
|
||||
CONST_EXPR(new RouteLifecycleHook("routerCanReuse"));
|
||||
export const routerCanDeactivate: RouteLifecycleHook =
|
||||
CONST_EXPR(new RouteLifecycleHook("routerCanDeactivate"));
|
||||
export const routerOnActivate: RouteLifecycleHook =
|
||||
CONST_EXPR(new RouteLifecycleHook("routerOnActivate"));
|
||||
export const routerOnReuse: RouteLifecycleHook =
|
||||
CONST_EXPR(new RouteLifecycleHook("routerOnReuse"));
|
||||
export const routerOnDeactivate: RouteLifecycleHook =
|
||||
CONST_EXPR(new RouteLifecycleHook("routerOnDeactivate"));
|
||||
|
||||
@@ -10,15 +10,15 @@ bool hasLifecycleHook(RouteLifecycleHook e, type) {
|
||||
final List interfaces = reflector.interfaces(type);
|
||||
var interface;
|
||||
|
||||
if (e == onActivate) {
|
||||
if (e == routerOnActivate) {
|
||||
interface = OnActivate;
|
||||
} else if (e == onDeactivate) {
|
||||
} else if (e == routerOnDeactivate) {
|
||||
interface = OnDeactivate;
|
||||
} else if (e == onReuse) {
|
||||
} else if (e == routerOnReuse) {
|
||||
interface = OnReuse;
|
||||
} else if (e == canDeactivate) {
|
||||
} else if (e == routerCanDeactivate) {
|
||||
interface = CanDeactivate;
|
||||
} else if (e == canReuse) {
|
||||
} else if (e == routerCanReuse) {
|
||||
interface = CanReuse;
|
||||
}
|
||||
|
||||
|
||||
@@ -202,13 +202,13 @@ export class Router {
|
||||
/** @internal */
|
||||
_navigate(instruction: Instruction, _skipLocationChange: boolean): Promise<any> {
|
||||
return this._settleInstruction(instruction)
|
||||
.then((_) => this._canReuse(instruction))
|
||||
.then((_) => this._routerCanReuse(instruction))
|
||||
.then((_) => this._canActivate(instruction))
|
||||
.then((result) => {
|
||||
if (!result) {
|
||||
return false;
|
||||
}
|
||||
return this._canDeactivate(instruction)
|
||||
return this._routerCanDeactivate(instruction)
|
||||
.then((result) => {
|
||||
if (result) {
|
||||
return this.commit(instruction, _skipLocationChange)
|
||||
@@ -252,15 +252,15 @@ export class Router {
|
||||
* Recursively set reuse flags
|
||||
*/
|
||||
/** @internal */
|
||||
_canReuse(instruction: Instruction): Promise<any> {
|
||||
_routerCanReuse(instruction: Instruction): Promise<any> {
|
||||
if (isBlank(this._outlet)) {
|
||||
return _resolveToFalse;
|
||||
}
|
||||
return this._outlet.canReuse(instruction.component)
|
||||
return this._outlet.routerCanReuse(instruction.component)
|
||||
.then((result) => {
|
||||
instruction.component.reuse = result;
|
||||
if (result && isPresent(this._childRouter) && isPresent(instruction.child)) {
|
||||
return this._childRouter._canReuse(instruction.child);
|
||||
return this._childRouter._routerCanReuse(instruction.child);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -269,7 +269,7 @@ export class Router {
|
||||
return canActivateOne(nextInstruction, this._currentInstruction);
|
||||
}
|
||||
|
||||
private _canDeactivate(instruction: Instruction): Promise<boolean> {
|
||||
private _routerCanDeactivate(instruction: Instruction): Promise<boolean> {
|
||||
if (isBlank(this._outlet)) {
|
||||
return _resolveToTrue;
|
||||
}
|
||||
@@ -285,7 +285,7 @@ export class Router {
|
||||
if (reuse) {
|
||||
next = _resolveToTrue;
|
||||
} else {
|
||||
next = this._outlet.canDeactivate(componentInstruction);
|
||||
next = this._outlet.routerCanDeactivate(componentInstruction);
|
||||
}
|
||||
// TODO: aux route lifecycle hooks
|
||||
return next.then((result) => {
|
||||
@@ -293,7 +293,7 @@ export class Router {
|
||||
return false;
|
||||
}
|
||||
if (isPresent(this._childRouter)) {
|
||||
return this._childRouter._canDeactivate(childInstruction);
|
||||
return this._childRouter._routerCanDeactivate(childInstruction);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
@@ -18,6 +18,7 @@ import * as routerMod from './router';
|
||||
import {ComponentInstruction, RouteParams, RouteData} from './instruction';
|
||||
import * as hookMod from './lifecycle_annotations';
|
||||
import {hasLifecycleHook} from './route_lifecycle_reflector';
|
||||
import {OnActivate, CanReuse, OnReuse, OnDeactivate, CanDeactivate} from './interfaces';
|
||||
|
||||
let _resolveToTrue = PromiseWrapper.resolve(true);
|
||||
|
||||
@@ -48,7 +49,7 @@ export class RouterOutlet {
|
||||
|
||||
/**
|
||||
* Called by the Router to instantiate a new component during the commit phase of a navigation.
|
||||
* This method in turn is responsible for calling the `onActivate` hook of its child.
|
||||
* This method in turn is responsible for calling the `routerOnActivate` hook of its child.
|
||||
*/
|
||||
activate(nextInstruction: ComponentInstruction): Promise<any> {
|
||||
var previousInstruction = this._currentInstruction;
|
||||
@@ -64,8 +65,9 @@ export class RouterOutlet {
|
||||
return this._loader.loadNextToLocation(componentType, this._elementRef, providers)
|
||||
.then((componentRef) => {
|
||||
this._componentRef = componentRef;
|
||||
if (hasLifecycleHook(hookMod.onActivate, componentType)) {
|
||||
return this._componentRef.instance.onActivate(nextInstruction, previousInstruction);
|
||||
if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) {
|
||||
return (<OnActivate>this._componentRef.instance)
|
||||
.routerOnActivate(nextInstruction, previousInstruction);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -73,7 +75,7 @@ export class RouterOutlet {
|
||||
/**
|
||||
* Called by the {@link Router} during the commit phase of a navigation when an outlet
|
||||
* reuses a component between different routes.
|
||||
* This method in turn is responsible for calling the `onReuse` hook of its child.
|
||||
* This method in turn is responsible for calling the `routerOnReuse` hook of its child.
|
||||
*/
|
||||
reuse(nextInstruction: ComponentInstruction): Promise<any> {
|
||||
var previousInstruction = this._currentInstruction;
|
||||
@@ -83,21 +85,23 @@ export class RouterOutlet {
|
||||
throw new BaseException(`Cannot reuse an outlet that does not contain a component.`);
|
||||
}
|
||||
return PromiseWrapper.resolve(
|
||||
hasLifecycleHook(hookMod.onReuse, this._currentInstruction.componentType) ?
|
||||
this._componentRef.instance.onReuse(nextInstruction, previousInstruction) :
|
||||
hasLifecycleHook(hookMod.routerOnReuse, this._currentInstruction.componentType) ?
|
||||
(<OnReuse>this._componentRef.instance)
|
||||
.routerOnReuse(nextInstruction, previousInstruction) :
|
||||
true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by the {@link Router} when an outlet disposes of a component's contents.
|
||||
* This method in turn is responsible for calling the `onDeactivate` hook of its child.
|
||||
* This method in turn is responsible for calling the `routerOnDeactivate` hook of its child.
|
||||
*/
|
||||
deactivate(nextInstruction: ComponentInstruction): Promise<any> {
|
||||
var next = _resolveToTrue;
|
||||
if (isPresent(this._componentRef) && isPresent(this._currentInstruction) &&
|
||||
hasLifecycleHook(hookMod.onDeactivate, this._currentInstruction.componentType)) {
|
||||
hasLifecycleHook(hookMod.routerOnDeactivate, this._currentInstruction.componentType)) {
|
||||
next = PromiseWrapper.resolve(
|
||||
this._componentRef.instance.onDeactivate(nextInstruction, this._currentInstruction));
|
||||
(<OnDeactivate>this._componentRef.instance)
|
||||
.routerOnDeactivate(nextInstruction, this._currentInstruction));
|
||||
}
|
||||
return next.then((_) => {
|
||||
if (isPresent(this._componentRef)) {
|
||||
@@ -112,16 +116,17 @@ export class RouterOutlet {
|
||||
*
|
||||
* If this resolves to `false`, the given navigation is cancelled.
|
||||
*
|
||||
* This method delegates to the child component's `canDeactivate` hook if it exists,
|
||||
* This method delegates to the child component's `routerCanDeactivate` hook if it exists,
|
||||
* and otherwise resolves to true.
|
||||
*/
|
||||
canDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
|
||||
routerCanDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
|
||||
if (isBlank(this._currentInstruction)) {
|
||||
return _resolveToTrue;
|
||||
}
|
||||
if (hasLifecycleHook(hookMod.canDeactivate, this._currentInstruction.componentType)) {
|
||||
if (hasLifecycleHook(hookMod.routerCanDeactivate, this._currentInstruction.componentType)) {
|
||||
return PromiseWrapper.resolve(
|
||||
this._componentRef.instance.canDeactivate(nextInstruction, this._currentInstruction));
|
||||
(<CanDeactivate>this._componentRef.instance)
|
||||
.routerCanDeactivate(nextInstruction, this._currentInstruction));
|
||||
}
|
||||
return _resolveToTrue;
|
||||
}
|
||||
@@ -133,17 +138,18 @@ export class RouterOutlet {
|
||||
* this will resolve to `false`. You can't reuse an old component when the new component
|
||||
* is of a different Type.
|
||||
*
|
||||
* Otherwise, this method delegates to the child component's `canReuse` hook if it exists,
|
||||
* Otherwise, this method delegates to the child component's `routerCanReuse` hook if it exists,
|
||||
* or resolves to true if the hook is not present.
|
||||
*/
|
||||
canReuse(nextInstruction: ComponentInstruction): Promise<boolean> {
|
||||
routerCanReuse(nextInstruction: ComponentInstruction): Promise<boolean> {
|
||||
var result;
|
||||
|
||||
if (isBlank(this._currentInstruction) ||
|
||||
this._currentInstruction.componentType != nextInstruction.componentType) {
|
||||
result = false;
|
||||
} else if (hasLifecycleHook(hookMod.canReuse, this._currentInstruction.componentType)) {
|
||||
result = this._componentRef.instance.canReuse(nextInstruction, this._currentInstruction);
|
||||
} else if (hasLifecycleHook(hookMod.routerCanReuse, this._currentInstruction.componentType)) {
|
||||
result = (<CanReuse>this._componentRef.instance)
|
||||
.routerCanReuse(nextInstruction, this._currentInstruction);
|
||||
} else {
|
||||
result = nextInstruction == this._currentInstruction ||
|
||||
(isPresent(nextInstruction.params) && isPresent(this._currentInstruction.params) &&
|
||||
|
||||
@@ -5,6 +5,7 @@ import {
|
||||
ChangeDetectorRef,
|
||||
HostViewRef,
|
||||
Injector,
|
||||
OnChanges,
|
||||
ProtoViewRef,
|
||||
SimpleChange
|
||||
} from 'angular2/angular2';
|
||||
@@ -91,13 +92,13 @@ export class DowngradeNg2ComponentAdapter {
|
||||
}
|
||||
|
||||
var prototype = this.info.type.prototype;
|
||||
if (prototype && prototype.onChanges) {
|
||||
if (prototype && (<OnChanges>prototype).ngOnChanges) {
|
||||
// Detect: OnChanges interface
|
||||
this.inputChanges = {};
|
||||
this.componentScope.$watch(() => this.inputChangeCount, () => {
|
||||
var inputChanges = this.inputChanges;
|
||||
this.inputChanges = {};
|
||||
this.component.onChanges(inputChanges);
|
||||
(<OnChanges>this.component).ngOnChanges(inputChanges);
|
||||
});
|
||||
}
|
||||
this.componentScope.$watch(() => this.changeDetector && this.changeDetector.detectChanges());
|
||||
|
||||
@@ -53,8 +53,8 @@ export class UpgradeNg1ComponentAdapterBuilder {
|
||||
self.outputs, self.propertyOutputs, self.checkProperties, self.propertyMap);
|
||||
}
|
||||
],
|
||||
onChanges: function() { /* needs to be here for ng2 to properly detect it */ },
|
||||
doCheck: function() { /* needs to be here for ng2 to properly detect it */ }
|
||||
ngOnChanges: function() { /* needs to be here for ng2 to properly detect it */ },
|
||||
ngDoCheck: function() { /* needs to be here for ng2 to properly detect it */ }
|
||||
});
|
||||
}
|
||||
|
||||
@@ -224,7 +224,7 @@ class UpgradeNg1ComponentAdapter implements OnChanges, DoCheck {
|
||||
}
|
||||
}
|
||||
|
||||
onChanges(changes: {[name: string]: SimpleChange}) {
|
||||
ngOnChanges(changes: {[name: string]: SimpleChange}) {
|
||||
for (var name in changes) {
|
||||
if ((<Object>changes).hasOwnProperty(name)) {
|
||||
var change: SimpleChange = changes[name];
|
||||
@@ -233,7 +233,7 @@ class UpgradeNg1ComponentAdapter implements OnChanges, DoCheck {
|
||||
}
|
||||
}
|
||||
|
||||
doCheck(): number {
|
||||
ngDoCheck(): number {
|
||||
var count = 0;
|
||||
var destinationObj = this.destinationObj;
|
||||
var lastValues = this.checkLastValues;
|
||||
|
||||
Reference in New Issue
Block a user