|
import { Routes, RouterModule, … } from '@angular/router';
|
Import
Routes, RouterModule, ...
from
@angular/router
.
|
|
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'path/:routeParam', component: MyComponent },
{ path: 'staticPath', component: … },
{ path: '**', component: … },
{ path: 'oldPath', redirectTo: '/staticPath' },
{ path: …, component: …, data: { message: 'Custom' } }
]);
const routing = RouterModule.forRoot(routes);
|
Configures routes for the application. Supports static, parameterized, redirect, and wildcard routes. Also supports custom route data and resolve.
|
|
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>
|
Marks the location to load the component of the active route.
|
|
<a routerLink="/path">
<a [routerLink]="[ '/path', routeParam ]">
<a [routerLink]="[ '/path', { matrixParam: 'value' } ]">
<a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }">
<a [routerLink]="[ '/path' ]" fragment="anchor">
|
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. To navigate to a root route, use the
/
prefix; for a child route, use the
./
prefix; for a sibling or parent, use the
../
prefix.
|
|
<a [routerLink]="[ '/path' ]" routerLinkActive="active">
|
The provided classes are added to the element when the
routerLink
becomes the current active route.
|
|
<a [routerLink]="[ '/path' ]" routerLinkActive="active" ariaCurrentWhenActive="page">
|
The provided classes and
aria-current
attribute are added to the element when the
routerLink
becomes the current active route.
|
|
function canActivateGuard: CanActivateFn =
(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => { … }
{ path: …, canActivate: [canActivateGuard] }
|
An interface for defining a function that the router should call first to determine if it should activate this component. Should return a
boolean|UrlTree
or an Observable/Promise that resolves to a
boolean|UrlTree
.
|
|
function canDeactivateGuard: CanDeactivateFn<T> =
(
component: T,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => { … }
{ path: …, canDeactivate: [canDeactivateGuard] }
|
An interface for defining a function that the router should call first to determine if it should deactivate this component after a navigation. Should return a
boolean|UrlTree
or an Observable/Promise that resolves to a
boolean|UrlTree
.
|
|
function canActivateChildGuard: CanActivateChildFn =
(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => { … }
{ path: …, canActivateChild: [canActivateGuard], children: … }
|
An interface for defining a function that the router should call first to determine if it should activate the child route. Should return a
boolean|UrlTree
or an Observable/Promise that resolves to a
boolean|UrlTree
.
|
|
function resolveGuard implements ResolveFn<T> =
(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => { … }
{ path: …, resolve: [resolveGuard] }
|
An interface for defining a function that the router should call first to resolve route data before rendering the route. Should return a value or an Observable/Promise that resolves to a value.
|
|
function canLoadGuard: CanLoadFn =
(
route: Route
) => { … }
{ path: …, canLoad: [canLoadGuard], loadChildren: … }
|
An interface for defining a function that the router should call first to check if the lazy loaded module should be loaded. Should return a
boolean|UrlTree
or an Observable/Promise that resolves to a
boolean|UrlTree
.
|
