Router
class
A service that provides navigation among views and URL manipulation capabilities.
class Router {
constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Route[])
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
getCurrentNavigation(): Navigation | null
resetConfig(config: Route[]): 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, exact: boolean): boolean
}
See also
Route
.- Routing and Navigation Guide.
Provided in
-
RouterModule
../testing/routertestingmodule
RouterTestingModule
Constructor
Creates the router service. | ||||||||||||||||||||||||
constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Route[])Parameters
|
Properties
Property | Description |
---|---|
events: Observable<Event>
|
Read-Only An event stream for routing events in this NgModule. |
routerState: RouterState
|
Read-Only The current state of routing in this NgModule. |
errorHandler: ErrorHandler
|
A handler for navigation errors in this NgModule. |
malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree
|
A handler for errors thrown by Router.parseUrl(url) when url contains an invalid character. The most common case is a % sign that's not encoded and is not part of a percent encoded sequence.
|
navigated: boolean
|
True if at least one navigation event has occurred, false otherwise. |
urlHandlingStrategy: UrlHandlingStrategy
|
A strategy for extracting and merging URLs. Used for AngularJS to Angular migrations. |
routeReuseStrategy: RouteReuseStrategy
|
A strategy for re-using routes. |
'ignore' |
How to handle a navigation request to the current URL. One of:
|
'always' |
How to merge parameters, data, and resolved data from parent to child routes. One of:
|
'eager' | Determines when the router updates the browser URL. By default ("deferred" ), updates the browser URL after navigation has finished. Set to 'eager' to update the browser URL at the beginning of navigation. You can choose to update early so that, if navigation fails, you can show an error message with the URL that failed.
|
'corrected' |
Enables a bug fix that corrects relative link resolution in components with empty paths. See also:
|
config: Routes
|
Declared in Constructor |
url: string
|
Read-Only The current URL. |
Methods
|
---|
Sets up the location change listener and performs the initial navigation. |
ParametersThere are no parameters. Returns
|
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. |
setUpLocationChangeListener(): voidParametersThere are no parameters. Returns
|
|
---|
Returns the current Navigation object when the router is navigating, and null when idle.
|
ParametersThere are no parameters. Returns
|
resetConfig() | |||
---|---|---|---|
Resets the route configuration used for navigation and generating links. | |||
resetConfig(config: Route[]): voidParameters
Returns
| |||
Usage Notesrouter.resetConfig([ { path: 'team/:id', component: TeamCmp, children: [ { path: 'simple', component: SimpleCmp }, { path: 'user/:name', component: UserCmp } ]} ]); |
dispose() |
---|
Disposes of the router. |
dispose(): voidParametersThere are no parameters. Returns
|
createUrlTree() | ||||||
---|---|---|---|---|---|---|
Appends URL segments to the current URL tree to create a new URL tree. | ||||||
Parameters
Returns
| ||||||
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: | ||||||
=== navigateByUrl(url: string | UrlTree, extras: NavigationBehaviorOptions = { skipLocationChange: false }): Promise<boolean> === Parameters
Returns
| ||||||
Usage NotesThe 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: | ||||||
Parameters
Returns
| ||||||
Usage NotesThe 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 UrlTree into a string
| |||
serializeUrl(url: UrlTree): stringParameters
Returns
|
parseUrl() | |||
---|---|---|---|
Parses a string into a UrlTree
| |||
parseUrl(url: string): UrlTreeParameters
Returns
|
isActive() | ||||||
---|---|---|---|---|---|---|
Returns whether the url is activated | ||||||
isActive(url: string | UrlTree, exact: boolean): booleanParameters
Returns
|
© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/router/Router