|
|
@ -2,33 +2,40 @@
|
|
|
|
Routing and navigation
|
|
|
|
Routing and navigation
|
|
|
|
@cheatsheetIndex 11
|
|
|
|
@cheatsheetIndex 11
|
|
|
|
@description
|
|
|
|
@description
|
|
|
|
{@target ts}`import {provideRouter, RouteConfig, ROUTER_DIRECTIVES, ...} from '@angular/router';`{@endtarget}
|
|
|
|
{@target ts}`import { Routes, RouterModule, ... } from '@angular/router';`{@endtarget}
|
|
|
|
{@target js}Available from the `ng.router` namespace{@endtarget}
|
|
|
|
{@target js}Available from the `ng.router` namespace{@endtarget}
|
|
|
|
{@target dart}`import 'package:angular2/router.dart';`{@endtarget}
|
|
|
|
{@target dart}`import 'package:angular2/router.dart';`{@endtarget}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(ts):
|
|
|
|
syntax(ts):
|
|
|
|
`@RouteConfig([
|
|
|
|
`let routes: Routes = [
|
|
|
|
{ path: '/:myParam', component: MyComponent, name: 'MyCmp' },
|
|
|
|
{ path: '', HomeComponent },
|
|
|
|
{ path: '/staticPath', component: ..., name: ...},
|
|
|
|
{ path: 'path/:routeParam', component: MyComponent },
|
|
|
|
{ path: '/*wildCardParam', component: ..., name: ...}
|
|
|
|
{ path: 'staticPath', component: ... },
|
|
|
|
])
|
|
|
|
{ path: '**', component: ... },
|
|
|
|
class MyComponent() {}`|`@RouteConfig`
|
|
|
|
{ path: 'oldPath', redirectTo: '/staticPath' },
|
|
|
|
|
|
|
|
{ path: ..., component: ..., data: { message: 'Custom' } }
|
|
|
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
provideRouter(routes);`|`Routes`
|
|
|
|
syntax(js):
|
|
|
|
syntax(js):
|
|
|
|
`var MyComponent = ng.router.RouteConfig([
|
|
|
|
`var routes = [
|
|
|
|
{ path: '/:myParam', component: MyComponent, name: 'MyCmp' },
|
|
|
|
{ path: '', HomeComponent },
|
|
|
|
{ path: '/staticPath', component: ..., name: ...},
|
|
|
|
{ path: ':routeParam', component: MyComponent },
|
|
|
|
{ path: '/*wildCardParam', component: ..., name: ...}
|
|
|
|
{ path: 'staticPath', component: ... },
|
|
|
|
]).Class({
|
|
|
|
{ path: '**', component: ... },
|
|
|
|
constructor: function() {}
|
|
|
|
{ path: 'oldPath', redirectTo: '/staticPath' },
|
|
|
|
});`|`ng.router.RouteConfig`
|
|
|
|
{ path: ..., component: ..., data: { message: 'Custom' } }
|
|
|
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ng.router.provideRouter(routes)`|`ng.router.Routes`
|
|
|
|
syntax(dart):
|
|
|
|
syntax(dart):
|
|
|
|
`@RouteConfig(const [
|
|
|
|
`@RouteConfig(const [
|
|
|
|
const Route(path: '/:myParam', component: MyComponent, name: 'MyCmp' ),
|
|
|
|
const Route(path: 'path', component: MyComponent, name: 'MyCmp' ),
|
|
|
|
])`|`@RouteConfig`
|
|
|
|
])`|`@RouteConfig`
|
|
|
|
description:
|
|
|
|
description:
|
|
|
|
Configures routes for the decorated component. Supports static, parameterized, and wildcard routes.
|
|
|
|
Configures routes for the application. Supports static, parameterized, redirect and wildcard routes. Also supports custom route data and resolve.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
@ -39,63 +46,128 @@ Marks the location to load the component of the active route.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax:
|
|
|
|
syntax(ts js):
|
|
|
|
`<a [routerLink]="[ '/MyCmp', {myParam: 'value' } ]">`|`[routerLink]`
|
|
|
|
`
|
|
|
|
|
|
|
|
<a [routerLink]="[ '/path', routeParam ]">
|
|
|
|
|
|
|
|
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
|
|
|
|
|
|
|
|
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
|
|
|
|
|
|
|
|
<a [routerLink]="[ '/path' ]" fragment="anchor">
|
|
|
|
|
|
|
|
`|`[routerLink]`
|
|
|
|
|
|
|
|
syntax(dart):
|
|
|
|
|
|
|
|
`<a [routerLink]="[ '/MyCmp', { routeParam: 'value' } ]">Link</a>`|`[routerLink]`
|
|
|
|
description:
|
|
|
|
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.
|
|
|
|
Creates a link to a different view based on a route instruction consisting of a route path, required and optional parameters, query parameters and a fragment. Add the '/' prefix to navigate to a root route; add the './' prefix for a child route; add the '../sibling' prefix for a sibling or parent route.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
|
|
|
|
syntax(ts js):
|
|
|
|
|
|
|
|
`<a [routerLink]="[ '/path' ]" routerLinkActive="active">`
|
|
|
|
|
|
|
|
syntax(dart):
|
|
|
|
|
|
|
|
`<a [routerLink]="[ '/MyCmp', { myParam: 'value' } ]">`|`[routerLink]`
|
|
|
|
|
|
|
|
description:
|
|
|
|
|
|
|
|
The provided class(es) will be added to the element when the routerLink becomes the current active route.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
|
|
|
|
syntax(ts):
|
|
|
|
|
|
|
|
`class CanActivateGuard implements CanActivate {
|
|
|
|
|
|
|
|
canActivate(
|
|
|
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
|
|
|
): Observable<boolean> | boolean { ... }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ path: ..., canActivate: [CanActivateGuard] }`|`CanActivate`
|
|
|
|
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`var CanActivateGuard = ng.core.Class({
|
|
|
|
|
|
|
|
canActivate: function(route, state) {
|
|
|
|
|
|
|
|
// return Observable boolean or boolean
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ path: ..., canActivate: [CanActivateGuard] }`|`CanActivate`
|
|
|
|
|
|
|
|
syntax(dart):
|
|
|
|
|
|
|
|
`@CanActivate(() => ...)class MyComponent() {}`|`@CanActivate`
|
|
|
|
|
|
|
|
description:
|
|
|
|
|
|
|
|
{@target js ts}An interface for defining a class that the router should call first to determine if it should activate this component. Should return a boolean or a Observable that resolves a boolean{@endtarget}
|
|
|
|
|
|
|
|
{@target dart}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 future.{@endtarget}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
|
|
|
|
syntax(ts):
|
|
|
|
|
|
|
|
`class CanDeactivateGuard implements CanDeactivate<T> {
|
|
|
|
|
|
|
|
canDeactivate(
|
|
|
|
|
|
|
|
component: T,
|
|
|
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
|
|
|
): Observable<boolean> | boolean { ... }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ path: ..., canDeactivate: [CanDeactivateGuard] }`|`CanDeactivate`
|
|
|
|
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`var CanDeactivateGuard = ng.core.Class({
|
|
|
|
|
|
|
|
canDeactivate: function(component, route, state) {
|
|
|
|
|
|
|
|
// return Observable boolean or boolean
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ path: ..., canDeactivate: [CanDeactivateGuard] }`|`CanDeactivate`
|
|
|
|
|
|
|
|
syntax(dart):
|
|
|
|
|
|
|
|
`routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
|
|
|
|
|
|
|
|
description:
|
|
|
|
|
|
|
|
{@target js ts}An interface for defining a class that the router should call first to determine if it should deactivate this component after a navigation. Should return a boolean or a Observable that resolves a boolean{@endtarget}
|
|
|
|
|
|
|
|
{@target dart}
|
|
|
|
|
|
|
|
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 future that completes successfully{@endtarget}.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(ts):
|
|
|
|
syntax(ts):
|
|
|
|
`@CanActivate(() => { ... })class MyComponent() {}`|`@CanActivate`
|
|
|
|
`class ResolveGuard implements Resolve<T> {
|
|
|
|
|
|
|
|
resolve(
|
|
|
|
|
|
|
|
route: ActivatedRouteSnapshot,
|
|
|
|
|
|
|
|
state: RouterStateSnapshot
|
|
|
|
|
|
|
|
): Observable<any> | any { ... }
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ path: ..., resolve: [ResolveGuard] }`|`Resolve`
|
|
|
|
syntax(js):
|
|
|
|
syntax(js):
|
|
|
|
`var MyComponent = ng.router.CanActivate(function() { ... }).Component({...}).Class({constructor: ...});`|`ng.router.CanActivate(function() { ... })`
|
|
|
|
`var ResolveGuard = ng.core.Class({
|
|
|
|
|
|
|
|
resolve: function(route, state) {
|
|
|
|
|
|
|
|
// return Observable value or value
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
{ path: ..., resolve: [ResolveGuard] }`|`Resolve`
|
|
|
|
|
|
|
|
description:
|
|
|
|
|
|
|
|
{@target js ts}An interface for defining a class that the router should call first to resolve route data before rendering the route. Should return a value or an Observable that resolves a value{@endtarget}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(dart):
|
|
|
|
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`
|
|
|
|
`routerOnActivate(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`routerOnActivate: function(nextInstruction, prevInstruction) { ... }`|`routerOnActivate`
|
|
|
|
|
|
|
|
description:
|
|
|
|
description:
|
|
|
|
After navigating to a component, the router calls the component's routerOnActivate method (if defined).
|
|
|
|
{@target dart}After navigating to a component, the router calls the component's routerOnActivate method (if defined).{@endtarget}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(ts dart):
|
|
|
|
syntax(dart):
|
|
|
|
`routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
|
|
|
|
`routerCanReuse(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`routerCanReuse: function(nextInstruction, prevInstruction) { ... }`|`routerCanReuse`
|
|
|
|
|
|
|
|
description:
|
|
|
|
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}.
|
|
|
|
{@target dart}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 future{@endtarget}.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(ts dart):
|
|
|
|
syntax(dart):
|
|
|
|
`routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
|
|
|
|
`routerOnReuse(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`routerOnReuse: function(nextInstruction, prevInstruction) { ... }`|`routerOnReuse`
|
|
|
|
|
|
|
|
description:
|
|
|
|
description:
|
|
|
|
The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.
|
|
|
|
{@target dart}The router calls the component's routerOnReuse method (if defined) when it re-uses a component instance.{@endtarget}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(ts dart):
|
|
|
|
syntax(dart):
|
|
|
|
`routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
|
|
|
|
`routerCanDeactivate(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`routerCanDeactivate: function(nextInstruction, prevInstruction) { ... }`|`routerCanDeactivate`
|
|
|
|
|
|
|
|
description:
|
|
|
|
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}.
|
|
|
|
{@target dart}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 future that completes successfully.{@endtarget}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@cheatsheetItem
|
|
|
|
@cheatsheetItem
|
|
|
|
syntax(ts dart):
|
|
|
|
syntax(dart):
|
|
|
|
`routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
|
|
|
|
`routerOnDeactivate(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
|
|
|
|
syntax(js):
|
|
|
|
|
|
|
|
`routerOnDeactivate: function(nextInstruction, prevInstruction) { ... }`|`routerOnDeactivate`
|
|
|
|
|
|
|
|
description:
|
|
|
|
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}.
|
|
|
|
{@target dart}Called before the directive is removed as the result of a route change. May return a future that pauses removing the directive until the future completes.{@endtarget}
|