Router

class

Provides the navigation and url manipulation capabilities.

class Router {
  constructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)
  events: Observable<Event>
  routerState: RouterState
  errorHandler: ErrorHandler
  malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
  navigated: boolean
  urlHandlingStrategy: UrlHandlingStrategy
  routeReuseStrategy: RouteReuseStrategy
  onSameUrlNavigation: 'reload' | 'ignore'
  paramsInheritanceStrategy: 'emptyOnly' | 'always'
  urlUpdateStrategy: 'deferred' | 'eager'
  relativeLinkResolution: 'legacy' | 'corrected'
  config: Routes
  url: string
  initialNavigation(): void
  setUpLocationChangeListener(): void
  resetConfig(config: Routes): void
  ngOnDestroy(): void
  dispose(): void
  createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree
  navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
  navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
  serializeUrl(url: UrlTree): string
  parseUrl(url: string): UrlTree
  isActive(url: string | UrlTree, exact: boolean): boolean
}

Description

See Routes for more details and examples.

Constructor

Creates the router service.

`constructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)`

Parameters

rootComponentType	Type: `Type \| null`.
urlSerializer	Type: `UrlSerializer`.
rootContexts	Type: `ChildrenOutletContexts`.
location	Type: `Location`.
injector	Type: `Injector`.
loader	Type: `NgModuleFactoryLoader`.
compiler	Type: `Compiler`.
config	Type: `Routes`.

Properties

Property	Description
`events: Observable<Event>`	Read-only.
`routerState: RouterState`	Read-only.
`errorHandler: ErrorHandler`	Error handler that is invoked when a navigation errors. See `ErrorHandler` for more information.
`malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree`	Malformed uri error handler is invoked when `Router.parseUrl(url)` throws an error due to containing an invalid character. The most common case would be a `%` sign that's not encoded and is not part of a percent encoded sequence.
`navigated: boolean`	Indicates if at least one navigation happened.
`urlHandlingStrategy: UrlHandlingStrategy`	Extracts and merges URLs. Used for AngularJS to Angular migrations.
`routeReuseStrategy: RouteReuseStrategy`
`onSameUrlNavigation: 'reload' \| 'ignore'`	Define what the router should do if it receives a navigation request to the current URL. By default, the router will ignore this navigation. However, this prevents features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'.
`paramsInheritanceStrategy: 'emptyOnly' \| 'always'`	Defines how the router merges params, data and resolved data from parent to child routes. Available options are: `'emptyOnly'`, the default, only inherits parent params for path-less or component-less routes. `'always'`, enables unconditional inheritance of parent params.
`urlUpdateStrategy: 'deferred' \| 'eager'`	Defines when the router updates the browser URL. The default behavior is to update after successful navigation. However, some applications may prefer a mode where the URL gets updated at the beginning of navigation. The most common use case would be updating the URL early so if navigation fails, you can show an error message with the URL that failed. Available options are: `'deferred'`, the default, updates the browser URL after navigation has finished. `'eager'`, updates browser URL at the beginning of navigation.
`relativeLinkResolution: 'legacy' \| 'corrected'`	See `RouterModule` for more information.
`config: Routes`	Declared in constructor.
`url: string`	Read-only. The current url

Methods

initialNavigation()
Sets up the location change listener and performs the initial navigation.
`initialNavigation(): void` Parameters There are no parameters. Returns `void`

initialNavigation()

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

`initialNavigation(): void`

Parameters

There are no parameters.

Returns

void

setUpLocationChangeListener()
Sets up the location change listener.
`setUpLocationChangeListener(): void` Parameters There are no parameters. Returns `void`

setUpLocationChangeListener()

Sets up the location change listener.

`setUpLocationChangeListener(): void`

Parameters

There are no parameters.

Returns

void

resetConfig()

Resets the configuration used for navigation and generating links.

`resetConfig(config: Routes): void`

Parameters

config

Type: Routes.

Returns

void

Example

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

ngOnDestroy()
`ngOnDestroy(): void` Parameters There are no parameters. Returns `void`

ngOnDestroy()

`ngOnDestroy(): void`

Parameters

There are no parameters.

Returns

void

dispose()
Disposes of the router
`dispose(): void` Parameters There are no parameters. Returns `void`

dispose()

Disposes of the router

`dispose(): void`

Parameters

There are no parameters.

Returns

void

createUrlTree()

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

`createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree`

Parameters

commands

Type: any[].

navigationExtras

Type: NavigationExtras.

Optional. Default is {}.

Returns

UrlTree

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.

Example

// 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()

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

`navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>`

Parameters

url

Type: string | UrlTree.

extras

Type: NavigationExtras.

Optional. Default is { skipLocationChange: false }.

Returns

Promise<boolean>

Returns a promise that:

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

Example

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

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

Since navigateByUrl() takes an absolute URL as the first parameter, it will not apply any delta to the current URL and ignores any properties in the second parameter (the NavigationExtras) that would change the provided URL.

navigate()

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

`navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>`

Parameters

commands

Type: any[].

extras

Type: NavigationExtras.

Optional. Default is { skipLocationChange: false }.

Returns

Promise<boolean>

Returns a promise that:

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

Example

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

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

The first parameter of navigate() is a delta to be applied to the current URL or the one provided in the relativeTo property of the second parameter (the NavigationExtras).

serializeUrl()

Serializes a UrlTree into a string

`serializeUrl(url: UrlTree): string`

Parameters

url	Type: `UrlTree`.

Returns

string

parseUrl()

Parses a string into a UrlTree

`parseUrl(url: string): UrlTree`

Parameters

url	Type: `string`.

Returns

UrlTree

isActive()

Returns whether the url is activated

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

Parameters

url	Type: `string \| UrlTree`.
exact	Type: `boolean`.

Returns

boolean

© 2010–2019 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v6.angular.io/api/router/Router