@angular/router

Router

Class

A service that facilitates navigation among views and URL manipulation capabilities. This service is provided in the root scope and configured with provideRouter.

API

Description

  
    class Router {
}

events

Observable<Event>

An event stream for routing events.

routerState

RouterState

The current state of routing in this NgModule.

navigated

boolean

True if at least one navigation event has occurred, false otherwise.

routeReuseStrategy

RouteReuseStrategy

@deprecated

Configure using providers instead: {provide: RouteReuseStrategy, useClass: MyStrategy}.

A strategy for re-using routes.

onSameUrlNavigation

OnSameUrlNavigation

@deprecated

Configure this through provideRouter or RouterModule.forRoot instead.

How to handle a navigation request to the current URL.

config

Routes

componentInputBindingEnabled

boolean

Indicates whether the application has opted in to binding Router data to component inputs.

This option is enabled by the withComponentInputBinding feature of provideRouter or bindToComponentInputs in the ExtraOptions of RouterModule.forRoot.

initialNavigation

void

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

@returnsvoid

setUpLocationChangeListener

void

Sets up the location change listener. This listener detects navigations triggered from outside the Router (the browser back/forward buttons, for example) and schedules a corresponding Router navigation so that the correct events, guards, etc. are triggered.

@returnsvoid

url

string

The current URL.

getCurrentNavigation

Navigation | null

Returns the current Navigation object when the router is navigating, and null when idle.

@returnsNavigation | null

lastSuccessfulNavigation

Navigation | null

The Navigation object of the most recent navigation to succeed and null if there has not been a successful navigation yet.

resetConfig

void

Resets the route configuration used for navigation and generating links.

@paramconfigRoutes

The route array for the new configuration.

@returnsvoid

Usage notes

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

ngOnDestroy

void

@returnsvoid

dispose

void

Disposes of the router.

@returnsvoid

createUrlTree

UrlTree

Appends URL segments to the current URL tree to create a new URL tree.

@paramcommandsany[]

An array of URL fragments with which to construct the new URL tree. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL tree or the one provided in the relativeTo property of the options object, if supplied.

@paramnavigationExtrasUrlCreationOptions

Options that control the navigation strategy.

@returnsUrlTree

Usage notes

          // create /team/33/user/11router.createUrlTree(['/team', 33, 'user', 11]);// create /team/33;expand=true/user/11router.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 noderouter.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/detailsrouter.createUrlTree(['details'], {relativeTo: route});// navigate to /team/33/user/22router.createUrlTree(['../22'], {relativeTo: route});// navigate to /team/44/user/22router.createUrlTree(['../../team/44/user/22'], {relativeTo: route});Note that a value of `null` or `undefined` for `relativeTo` indicates that thetree should be created relative to the root.

navigateByUrl

Promise<boolean>

Navigates to a view using an absolute route path.

@paramurlstring | UrlTree

An absolute path for a defined route. The function does not apply any delta to the current URL.

@paramextrasNavigationBehaviorOptions

An object containing properties that modify the navigation strategy.

@returnsPromise<boolean>

Usage notes

The following calls request navigation to an absolute path.

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

navigate

Promise<boolean>

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

@paramcommandsany[]

An array of URL fragments with which to construct the target URL. If the path is static, can be the literal URL string. For a dynamic path, pass an array of path segments, followed by the parameters for each segment. The fragments are applied to the current URL or the one provided in the relativeTo property of the options object, if supplied.

@paramextrasNavigationExtras

An options object that determines how the URL should be constructed or interpreted.

@returnsPromise<boolean>

Usage notes

The following calls request navigation to a dynamic route path relative to the current URL.

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

serializeUrl

string

Serializes a UrlTree into a string

@paramurlUrlTree

@returnsstring

parseUrl

UrlTree

Parses a string into a UrlTree

@paramurlstring

@returnsUrlTree

isActive

3 overloads

Returns whether the url is activated.

@deprecated

Use IsActiveMatchOptions instead.

The equivalent IsActiveMatchOptions for true is {paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored'}.
The equivalent for false is {paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored'}.

@paramurlstring | UrlTree

@paramexactboolean

@returnsboolean

Returns whether the url is activated.

@paramurlstring | UrlTree

@parammatchOptionsIsActiveMatchOptions

@returnsboolean

@paramurlstring | UrlTree

@parammatchOptionsboolean | IsActiveMatchOptions

@returnsboolean