angular-cn/modules/angular2/docs/cheatsheet/routing.md

4.3 KiB

@cheatsheetSection Routing and navigation @cheatsheetIndex 10 @description {@target ts}import {RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, ...} from 'angular2/router';{@endtarget} {@target js}Available from the ng.router namespace{@endtarget} {@target dart}import 'package:angular2/router.dart';{@endtarget}

@cheatsheetItem syntax(ts): @RouteConfig([ { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, { path: '/staticPath', component: ..., as: ...}, { path: '/*wildCardParam', component: ..., as: ...} ]) class MyComponent() {}|@RouteConfig syntax(js): var MyComponent = ng.router.RouteConfig([ { path: '/:myParam', component: MyComponent, as: 'MyCmp' }, { path: '/staticPath', component: ..., as: ...}, { path: '/*wildCardParam', component: ..., as: ...} ]).Class({ constructor: function() {} });|ng.router.RouteConfig syntax(dart): @RouteConfig(const [ const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ), ])|@RouteConfig description: Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.

@cheatsheetItem syntax: <router-outlet></router-outlet>|router-outlet description: Marks the location to load the component of the active route.

@cheatsheetItem syntax: <a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">|[routerLink] description: Creates a link to a different view based on a route instruction consisting of a route name and optional parameters. The route name matches the as property of a configured route. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route.

@cheatsheetItem syntax(ts): @CanActivate(() => { ... })class MyComponent() {}|@CanActivate syntax(js): var MyComponent = ng.router.CanActivate(function() { ... }).Component({...}).Class({constructor: ...});|ng.router.CanActivate(function() { ... }) syntax(dart): @CanActivate(() => ...)class MyComponent() {}|@CanActivate description: A component decorator defining a function that the router should call first to determine if it should activate this component. Should return a boolean or a {@target js ts}promise{@endtarget}{@target dart}future{@endtarget}.

@cheatsheetItem syntax(ts dart): routerOnActivate(nextInstruction, prevInstruction) { ... }|routerOnActivate syntax(js): routerOnActivate: function(nextInstruction, prevInstruction) { ... }|routerOnActivate description: After navigating to a component, the router calls the component's routerOnActivate method (if defined).

@cheatsheetItem syntax(ts dart): routerCanReuse(nextInstruction, prevInstruction) { ... }|routerCanReuse syntax(js): routerCanReuse: function(nextInstruction, prevInstruction) { ... }|routerCanReuse description: 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 {@target js ts}promise{@endtarget}{@target dart}future{@endtarget}.

@cheatsheetItem syntax(ts dart): routerOnReuse(nextInstruction, prevInstruction) { ... }|routerOnReuse syntax(js): routerOnReuse: function(nextInstruction, prevInstruction) { ... }|routerOnReuse description: The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.

@cheatsheetItem syntax(ts dart): routerCanDeactivate(nextInstruction, prevInstruction) { ... }|routerCanDeactivate syntax(js): routerCanDeactivate: function(nextInstruction, prevInstruction) { ... }|routerCanDeactivate description: 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 {@target js ts}promise that is resolved{@endtarget}{@target dart}future that completes successfully{@endtarget}.

@cheatsheetItem syntax(ts dart): routerOnDeactivate(nextInstruction, prevInstruction) { ... }|routerOnDeactivate syntax(js): routerOnDeactivate: function(nextInstruction, prevInstruction) { ... }|routerOnDeactivate description: Called before the directive is removed as the result of a route change. May return a {@target js ts}promise{@endtarget}{@target dart}future{@endtarget} that pauses removing the directive until the {@target js ts}promise resolves{@endtarget}{@target dart}future completes{@endtarget}.