iSharkFly-Docs
/
angular-docs-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs(router): improve docs for lifecycle hooks 

Closes #4300
This commit is contained in:
Brian Ford 2015-09-21 16:25:37 -07:00
parent 5c0a9eff62
commit c01f327194
2 changed files with 101 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
modules/angular2/src/router/interfaces.ts
View File

@ -8,76 +8,102 @@ var __ignore_me = global;
/**
* Defines route lifecycle method [onActivate], which is called by the router at the end of a
* Defines route lifecycle method `onActivate`, which is called by the router at the end of a
* successful route navigation.
*
* For a single component's navigation, only one of either [onActivate] or [onReuse] will be called,
* depending on the result of [canReuse].
* 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
* 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
* instantiate and activate child components.
*
* ## Example
* ```
* @Directive({
* import {Component, View} from 'angular2/angular2';
* import {OnActivate, ComponentInstruction} from 'angular2/router';
*
* @Component({
* selector: 'my-cmp'
* })
* @View({
* template: '<div>hello!</div>'
* })
* class MyCmp implements OnActivate {
* onActivate(next, prev) {
* onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
* this.log = 'Finished navigating from ' + prev.urlPath + ' to ' + next.urlPath;
* }
* }
* ```
* ```
*/
export interface OnActivate {
onActivate(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
}
/**
* Defines route lifecycle method [onReuse], which is called by the router at the end of a
* successful route navigation when [canReuse] is implemented and returns or resolves to true.
* Defines route lifecycle method `onReuse`, 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 [onActivate] or [onReuse] will be called,
* depending on the result of [canReuse].
* 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
* representing the current route being navigated to, and the second parameter representing the
* previous route or `null`.
*
* ## Example
* ```
* @Directive({
* import {Component, View} from 'angular2/angular2';
* import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
*
* @Component({
* selector: 'my-cmp'
* })
* @View({
* template: '<div>hello!</div>'
* })
* class MyCmp implements CanReuse, OnReuse {
* canReuse() {
* canReuse(next: ComponentInstruction, prev: ComponentInstruction) {
* return true;
* }
*
* onReuse(next, prev) {
* onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
* this.params = next.params;
* }
* }
* ```
* ```
*/
export interface OnReuse {
onReuse(nextInstruction: ComponentInstruction, prevInstruction: ComponentInstruction): any;
}
/**
* Defines route lifecycle method [onDeactivate], which is called by the router before destroying
* Defines route lifecycle method `onDeactivate`, 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
* 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.
*
* ## Example
* ```
* @Directive({
* import {Component, View} from 'angular2/angular2';
* import {OnDeactivate, ComponentInstruction} from 'angular2/router';
*
* @Component({
* selector: 'my-cmp'
* })
* class MyCmp implements CanReuse, OnReuse {
* canReuse() {
* return true;
* }
*
* onReuse(next, prev) {
* this.params = next.params;
* @View({
* template: '<div>hello!</div>'
* })
* class MyCmp implements OnDeactivate {
* onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
* return this.doFadeAwayAnimation();
* }
* }
* ```
@ -87,24 +113,37 @@ export interface OnDeactivate {
}
/**
* Defines route lifecycle method [canReuse], which is called by the router to determine whether a
* Defines route lifecycle method `canReuse`, 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.
*
* If `canReuse` returns or resolves to `true`, the component instance will be reused.
* The `canReuse` 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
* 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.
*
* ## Example
* ```
* @Directive({
* import {Component, View} from 'angular2/angular2';
* import {CanReuse, OnReuse, ComponentInstruction} from 'angular2/router';
*
* @Component({
* selector: 'my-cmp'
* })
* @View({
* template: '<div>hello!</div>'
* })
* class MyCmp implements CanReuse, OnReuse {
* canReuse(next, prev) {
* canReuse(next: ComponentInstruction, prev: ComponentInstruction) {
* return next.params.id == prev.params.id;
* }
*
* onReuse(next, prev) {
* onReuse(next: ComponentInstruction, prev: ComponentInstruction) {
* this.id = next.params.id;
* }
* }
@ -115,20 +154,32 @@ export interface CanReuse {
}
/**
* Defines route lifecycle method [canDeactivate], which is called by the router to determine
* Defines route lifecycle method `canDeactivate`, which is called by the router to determine
* if a component can be removed as part of a navigation.
*
* If `canDeactivate` returns or resolves to `false`, the navigation is cancelled.
* The `canDeactivate` 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
* 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.
*
* ## Example
* ```
* @Directive({
* import {Component, View} from 'angular2/angular2';
* import {CanDeactivate, ComponentInstruction} from 'angular2/router';
*
* @Component({
* selector: 'my-cmp'
* })
* @View({
* template: '<div>hello!</div>'
* })
* class MyCmp implements CanDeactivate {
* canDeactivate(next, prev) {
* canDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
* return askUserIfTheyAreSureTheyWantToQuit();
* }
* }

24
modules/angular2/src/router/lifecycle_annotations.ts
View File

@ -17,21 +17,33 @@ export {
} from './lifecycle_annotations_impl';
/**
* Defines route lifecycle method [canActivate], which is called by the router to determine
* Defines route lifecycle hook `CanActivate`, which is called by the router to determine
* if a component can be instantiated as part of a navigation.
*
* The `CanActivate` 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`.
*
* Note that unlike other lifecycle hooks, this one uses an annotation rather than an interface.
* This is because [canActivate] is called before the component is instantiated.
* This is because the `CanActivate` function is called before the component is instantiated.
*
* If `canActivate` returns or resolves to `false`, the navigation is cancelled.
*
* If `canActivate` throws or rejects, the navigation is also cancelled.
* If `CanActivate` returns or resolves to `false`, the navigation is cancelled.
* If `CanActivate` throws or rejects, the navigation is also cancelled.
* If `CanActivate` returns or resolves to `true`, navigation continues, the component is
* instantiated, and the {@link OnActivate} hook of that component is called if implemented.
*
* ## Example
* ```
* @Directive({
* import {Component} from 'angular2/angular2';
* import {CanActivate} from 'angular2/router';
*
* @Component({
* selector: 'control-panel-cmp'
* })
* @View({
* template: '<div>Control Panel: ...</div>'
* })
* @CanActivate(() => checkIfUserIsLoggedIn())
* class ControlPanelCmp {
* // ...