On this page
Router
class
final
A service that provides navigation among views and URL manipulation capabilities.
class Router {
events: Observable<Event>
routerState
errorHandler: (error: any) => any
navigated: boolean
routeReuseStrategy: RouteReuseStrategy
onSameUrlNavigation: OnSameUrlNavigation
config: Routes
componentInputBindingEnabled: boolean
url: string
lastSuccessfulNavigation: Navigation | null
initialNavigation(): void
setUpLocationChangeListener(): void
getCurrentNavigation(): Navigation | null
resetConfig(config: Routes): void
dispose(): void
createUrlTree(commands: any[], navigationExtras: UrlCreationOptions = {}): UrlTree
navigateByUrl(url: string | UrlTree, extras: NavigationBehaviorOptions = {...}): Promise<boolean>
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
serializeUrl(url: UrlTree): string
parseUrl(url: string): UrlTree
isActive(url: string | UrlTree, matchOptions: boolean | IsActiveMatchOptions): boolean
}
See also
Provided in
-
RouterModule
'root'
Properties
Property | Description |
---|---|
events: Observable<Event> |
Read-Only An event stream for routing events. |
routerState |
Read-Only The current state of routing in this NgModule. |
errorHandler: (error: any) => any |
Deprecated A handler for navigation errors in this NgModule. Deprecated Subscribe to the See also: |
navigated: boolean |
True if at least one navigation event has occurred, false otherwise. |
routeReuseStrategy: RouteReuseStrategy |
Deprecated A strategy for re-using routes. Deprecated Configure using |
onSameUrlNavigation: OnSameUrlNavigation |
Deprecated How to handle a navigation request to the current URL. Deprecated Configure this through See also: |
config: Routes |
|
componentInputBindingEnabled: boolean |
Read-Only Indicates whether the application has opted in to binding Router data to component inputs. This option is enabled by the |
url: string |
Read-Only The current URL. |
lastSuccessfulNavigation: Navigation | null |
Read-Only The |
Methods
|
---|
Sets up the location change listener and performs the initial navigation. |
|
setUpLocationChangeListener()
|
---|
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. |
|
|
---|
Returns the current |
|
resetConfig()
|
|||
---|---|---|---|
Resets the route configuration used for navigation and generating links. |
|||
|
config |
Routes |
The route array for the new configuration. |
Returns
void
Usage Notes
router.resetConfig([
{ path: 'team/:id', component: TeamCmp, children: [
{ path: 'simple', component: SimpleCmp },
{ path: 'user/:name', component: UserCmp }
]}
]);
dispose()
|
---|
Disposes of the router. |
|
createUrlTree()
|
||||||
---|---|---|---|---|---|---|
Appends URL segments to the current URL tree to create a new URL tree. |
||||||
|
commands |
any[] |
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 |
navigationExtras |
UrlCreationOptions |
Options that control the navigation strategy. Optional. Default is |
Returns
UrlTree
: The new URL tree.
Usage Notes
// 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});
Note that a value of `null` or `undefined` for `relativeTo` indicates that the
tree should be created relative to the root.
|
||||||
---|---|---|---|---|---|---|
Navigates to a view using an absolute route path. See also: |
||||||
|
url |
string | UrlTree |
An absolute path for a defined route. The function does not apply any delta to the current URL. |
extras |
NavigationBehaviorOptions |
An object containing properties that modify the navigation strategy. Optional. Default is |
Returns
Promise<boolean>
: A Promise that resolves to 'true' when navigation succeeds, to 'false' when navigation fails, or is rejected on error.
Usage Notes
The following calls request navigation to an absolute path.
router.navigateByUrl("/team/33/user/11");
// Navigate without updating the URL
router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });
|
||||||
---|---|---|---|---|---|---|
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute. See also: |
||||||
|
commands |
any[] |
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 |
extras |
NavigationExtras |
An options object that determines how the URL should be constructed or interpreted. Optional. Default is |
Returns
Promise<boolean>
: A Promise that resolves to true
when navigation succeeds, to false
when navigation fails, or is rejected on error.
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 behavior
router.navigate(['team', 33, 'user', 11], {relativeTo: route, skipLocationChange: true});
serializeUrl()
|
---|
Serializes a |
parseUrl()
|
---|
Parses a string into a |
isActive()
|
||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
3 overloads...Overload #1Returns whether the url is activated.
|
url |
string | UrlTree |
|
exact |
boolean |
Returns
boolean
Overload #2
Returns whether the url is activated.
isActive(url: string | UrlTree, matchOptions: IsActiveMatchOptions): boolean
Parameters
url |
string | UrlTree |
|
matchOptions |
IsActiveMatchOptions |
Returns
boolean
Overload #3
isActive(url: string | UrlTree, matchOptions: boolean | IsActiveMatchOptions): boolean
Parameters
url |
string | UrlTree |
|
matchOptions |
boolean | IsActiveMatchOptions |
Returns
boolean
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/api/router/Router