Router

Stable Class

What it does

Provides the navigation and url manipulation capabilities.

See Routes for more details and examples.

Class Overview

class Router {
  constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, outletMap: RouterOutletMap, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)
  
  
  errorHandler : ErrorHandler
  navigated : boolean
  urlHandlingStrategy : UrlHandlingStrategy
  routeReuseStrategy : RouteReuseStrategy
  config : Routes
  initialNavigation() : void
  setUpLocationChangeListener() : void
  routerState : RouterState
  url : string
  events : Observable<Event>
  resetConfig(config: Routes) : void
  ngOnDestroy()
  dispose() : void
  createUrlTree(commands: any[], {relativeTo, queryParams, fragment, preserveQueryParams,}?: NavigationExtras) : UrlTree
  navigateByUrl(url: string|UrlTree, extras?: NavigationExtras) : Promise<boolean>
  navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>
  serializeUrl(url: UrlTree) : string
  parseUrl(url: string) : UrlTree
  isActive(url: string|UrlTree, exact: boolean) : boolean
}

Class Description

Constructor

constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, outletMap: RouterOutletMap, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)

Creates the router service.

Class Details

errorHandler : ErrorHandler

Error handler that is invoked when a navigation errors.

See ErrorHandler for more information.

navigated : boolean

Indicates if at least one navigation happened.

urlHandlingStrategy : UrlHandlingStrategy

Extracts and merges URLs. Used for AngularJS to Angular migrations.

routeReuseStrategy : RouteReuseStrategy

config : Routes

initialNavigation() : void

Sets up the location change listener and performs the initial navigation.

setUpLocationChangeListener() : void

Sets up the location change listener.

routerState : RouterState

The current route state

url : string

The current url

events : Observable<Event>

An observable of router events

resetConfig(config: Routes) : void

Resets the configuration used for navigation and generating links.

Usage

router.resetConfig([
 { path: 'team/:id', component: TeamCmp, children: [
   { path: 'simple', component: SimpleCmp },
   { path: 'user/:name', component: UserCmp }
 ]}
]);

ngOnDestroy()

dispose() : void

Disposes of the router

createUrlTree(commands: any[], {relativeTo, queryParams, fragment, preserveQueryParams,
                        preserveFragment}?: NavigationExtras) : UrlTree

Applies an array of commands to the current url tree and creates a new url tree.

When given an activate route, applies the given commands starting from the route. When not given a route, applies the given command starting from the root.

Usage

// create /team/33/user/11
router.createUrlTree(['/team', 33, 'user', 11]);

// create /team/33;expand=true/user/11
router.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);

// you can collapse static segments like this (this works only with the first passed-in value):
router.createUrlTree(['/team/33/user', userId]);

// If the first segment can contain slashes, and you do not want the router to split it, you
// can do the following:

router.createUrlTree([{segmentPath: '/one/two'}]);

// create /team/33/(user/11//right:chat)
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);

// remove the right secondary node
router.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);

// assuming the current url is `/team/33/user/11` and the route points to `user/11`

// navigate to /team/33/user/11/details
router.createUrlTree(['details'], {relativeTo: route});

// navigate to /team/33/user/22
router.createUrlTree(['../22'], {relativeTo: route});

// navigate to /team/44/user/22
router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});

navigateByUrl(url: string|UrlTree, extras?: NavigationExtras) : Promise<boolean>

Navigate based on the provided url. This navigation is always absolute.

Returns a promise that:

• resolves to 'true' when navigation succeeds,
• resolves to 'false' when navigation fails,
• is rejected when an error happens.

Usage

router.navigateByUrl("/team/33/user/11");

// Navigate without updating the URL
router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });

In opposite to navigate, navigateByUrl takes a whole URL and does not apply any delta to the current one.

navigate(commands: any[], extras?: NavigationExtras) : Promise<boolean>

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

Returns a promise that:

• resolves to 'true' when navigation succeeds,
• resolves to 'false' when navigation fails,
• is rejected when an error happens.

Usage

router.navigate(['team', 33, 'user', 11], {relativeTo: route});

// Navigate without updating the URL
router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});

In opposite to navigateByUrl, navigate always takes a delta that is applied to the current URL.

serializeUrl(url: UrlTree) : string

Serializes a UrlTree into a string

parseUrl(url: string) : UrlTree

Parses a string into a UrlTree

isActive(url: string|UrlTree, exact: boolean) : boolean

Returns whether the url is activated

exported from @angular/router/index, defined in @angular/router/src/router.ts