{ "id": "api/router/Router", "title": "Router", "contents": "\n\n
\n
\n
\n \n API > @angular/router\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

Routerlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

A service that provides navigation among views and URL manipulation capabilities.

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

See alsolink

\n \n
\n\n\n \n \n \n\n\n\n\n\n\n

Constructorlink

\n\n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n

Creates the router service.

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

Propertieslink

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
PropertyDescription
\n \n events: Observable<Event>\n Read-Only\n \n

An event stream for routing events in this NgModule.

\n\n \n
\n \n routerState: RouterState\n Read-Only\n \n

The current state of routing in this NgModule.

\n\n \n
\n \n errorHandler: ErrorHandler\n \n \n

A handler for navigation errors in this NgModule.

\n\n \n
\n \n malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree\n \n \n

A handler for errors thrown by Router.parseUrl(url)\nwhen url contains an invalid character.\nThe most common case is a % sign\nthat's not encoded and is not part of a percent encoded sequence.

\n\n \n
\n \n navigated: boolean\n \n \n

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

\n\n \n
\n \n urlHandlingStrategy: UrlHandlingStrategy\n \n \n

A strategy for extracting and merging URLs.\nUsed for AngularJS to Angular migrations.

\n\n \n
\n \n routeReuseStrategy: RouteReuseStrategy\n \n \n

A strategy for re-using routes.

\n\n \n
\n \n onSameUrlNavigation: 'reload' | 'ignore'\n \n \n

How to handle a navigation request to the current URL. One of:

\n
    \n
  • 'ignore' : The router ignores the request.
    • \n
  • 'reload' : The router reloads the URL. Use to implement a \"refresh\" feature.
    • \n
\n\n \n
\n \n paramsInheritanceStrategy: 'emptyOnly' | 'always'\n \n \n

How to merge parameters, data, and resolved data from parent to child\nroutes. One of:

\n\n
    \n
  • 'emptyOnly' : Inherit parent parameters, data, and resolved data\nfor path-less or component-less routes.
    • \n
  • 'always' : Inherit parent parameters, data, and resolved data\nfor all child routes.
    • \n
\n\n
\n \n urlUpdateStrategy: 'deferred' | 'eager'\n \n \n

Determines when the router updates the browser URL.\nBy default (\"deferred\"), updates the browser URL after navigation has finished.\nSet to 'eager' to update the browser URL at the beginning of navigation.\nYou can choose to update early so that, if navigation fails,\nyou can show an error message with the URL that failed.

\n\n \n
\n \n relativeLinkResolution: 'legacy' | 'corrected'\n \n \n

Enables a bug fix that corrects relative link resolution in components with empty paths.

\n\n \n

See also:

\n \n \n
\n \n config: Routes\n \n Declared in Constructor\n \n \n
\n \n url: string\n Read-Only\n \n

The current URL.

\n\n \n
\n
\n\n\n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n initialNavigation()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n
\n
\n \n\n initialNavigation(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n setUpLocationChangeListener()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n
\n
\n \n\n setUpLocationChangeListener(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n getCurrentNavigation()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

The current Navigation object if one exists

\n\n
\n
\n \n\n getCurrentNavigation(): Navigation | null\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

Navigation | null

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n resetConfig()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Resets the route configuration used for navigation and generating links.

\n\n
\n
\n \n\n resetConfig(config: Routes): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n config\n Routes\n

The route array for the new configuration.

\n\n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

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

\n dispose()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Disposes of the router.

\n\n
\n
\n \n\n dispose(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n createUrlTree()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n
\n
\n \n\n createUrlTree(commands: any[], navigationExtras: UrlCreationOptions = {}): UrlTree\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n commands\n any[]\n

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

\n\n
\n \n navigationExtras\n UrlCreationOptions\n

Options that control the navigation strategy.

\n

Optional. Default is {}.

\n\n
\n\n \n
Returns
\n

UrlTree: The new URL tree.

\n \n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n \n// create /team/33/user/11\nrouter.createUrlTree(['/team', 33, 'user', 11]);\n\n// create /team/33;expand=true/user/11\nrouter.createUrlTree(['/team', 33, {expand: true}, 'user', 11]);\n\n// you can collapse static segments like this (this works only with the first passed-in value):\nrouter.createUrlTree(['/team/33/user', userId]);\n\n// If the first segment can contain slashes, and you do not want the router to split it,\n// you can do the following:\nrouter.createUrlTree([{segmentPath: '/one/two'}]);\n\n// create /team/33/(user/11//right:chat)\nrouter.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: 'chat'}}]);\n\n// remove the right secondary node\nrouter.createUrlTree(['/team', 33, {outlets: {primary: 'user/11', right: null}}]);\n\n// assuming the current url is `/team/33/user/11` and the route points to `user/11`\n\n// navigate to /team/33/user/11/details\nrouter.createUrlTree(['details'], {relativeTo: route});\n\n// navigate to /team/33/user/22\nrouter.createUrlTree(['../22'], {relativeTo: route});\n\n// navigate to /team/44/user/22\nrouter.createUrlTree(['../../team/44/user/22'], {relativeTo: route});\n\nNote that a value of `null` or `undefined` for `relativeTo` indicates that the\ntree should be created relative to the root.\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n navigateByUrl()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Navigates to a view using an absolute route path.

\n\n

See also:

\n \n \n
\n
\n \n\n navigateByUrl(url: string | UrlTree, extras: NavigationBehaviorOptions = {\n skipLocationChange: false\n}): Promise<boolean>\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n url\n string | UrlTree\n

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

\n\n
\n \n extras\n NavigationBehaviorOptions\n

An object containing properties that modify the navigation strategy.

\n

Optional. Default is { skipLocationChange: false }.

\n\n
\n\n \n
Returns
\n

Promise<boolean>: A Promise that resolves to 'true' when navigation succeeds,\nto 'false' when navigation fails, or is rejected on error.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n

The following calls request navigation to an absolute path.

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

\n navigate()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

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

\n\n

See also:

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

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

\n\n
\n \n extras\n NavigationExtras\n

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

\n

Optional. Default is { skipLocationChange: false }.

\n\n
\n\n \n
Returns
\n

Promise<boolean>: A Promise that resolves to true when navigation succeeds, to false when navigation\nfails,\nor is rejected on error.

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n

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

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

\n serializeUrl()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Serializes a UrlTree into a string

\n\n
\n
\n \n\n serializeUrl(url: UrlTree): string\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n url\n UrlTree\n \n \n
\n\n \n
Returns
\n

string

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n parseUrl()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Parses a string into a UrlTree

\n\n
\n
\n \n\n parseUrl(url: string): UrlTree\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n url\n string\n \n \n
\n\n \n
Returns
\n

UrlTree

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n isActive()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n
\n

3 overloads...

\n \n Show All\n Hide All\n expand_more\n \n
\n \n
\n \n \n
Overload #1
\n
\n \n
\n

Returns whether the url is activated.

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

Deprecated Use IsActiveUrlTreeOptions instead.

\n
    \n
  • The equivalent IsActiveUrlTreeOptions for true is\n{paths: 'exact', queryParams: 'exact', fragment: 'ignored', matrixParams: 'ignored'}.
    • \n
  • The equivalent for false is\n{paths: 'subset', queryParams: 'subset', fragment: 'ignored', matrixParams: 'ignored'}.
    • \n
\n\n
\n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n url\n string | UrlTree\n \n \n
\n \n exact\n boolean\n \n \n
\n\n \n
Returns
\n

boolean

\n\n \n\n\n \n\n \n
\n
\n \n
Overload #2
\n
\n \n
\n

Returns whether the url is activated.

\n\n
\n\n isActive(url: string | UrlTree, matchOptions: IsActiveMatchOptions): boolean\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n url\n string | UrlTree\n \n \n
\n \n matchOptions\n IsActiveMatchOptions\n \n \n
\n\n \n
Returns
\n

boolean

\n\n \n\n\n \n\n \n
\n
\n \n
Overload #3
\n
\n \n\n isActive(url: string | UrlTree, matchOptions: boolean | IsActiveMatchOptions): boolean\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n url\n string | UrlTree\n \n \n
\n \n matchOptions\n boolean | IsActiveMatchOptions\n \n \n
\n\n \n
Returns
\n

boolean

\n\n \n\n\n \n\n \n
\n \n \n
\n
\n
\n\n \n
\n\n\n\n \n\n\n
\n
\n\n\n" }