Router
class
A service that provides navigation and URL manipulation capabilities.
class Router {
constructor(rootComponentType: Type<any>, 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
getCurrentNavigation(): Navigation | null
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
}
See also
Route
.- Routing and Navigation Guide.
Constructor
Creates the router service. | ||||||||||||||||||||||||
constructor(rootComponentType: Type<any>, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)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. |
setUpLocationChangeListener(): voidParametersThere are no parameters. Returns
|
|
---|
The current Navigation object if one exists |
ParametersThere are no parameters. Returns
|
resetConfig() | |||
---|---|---|---|
Resets the configuration used for navigation and generating links. | |||
resetConfig(config: Routes): voidParameters
Returns
| |||
Usage Notesrouter.resetConfig([ { path: 'team/:id', component: TeamCmp, children: [ { path: 'simple', component: SimpleCmp }, { path: 'user/:name', component: UserCmp } ]} ]); |
ngOnDestroy() |
---|
ngOnDestroy(): voidParametersThere are no parameters. Returns
|
dispose() |
---|
Disposes of the router. |
dispose(): voidParametersThere are no parameters. Returns
|
createUrlTree() | ||||||
---|---|---|---|---|---|---|
Applies an array of commands to the current URL tree and creates a new URL tree. | ||||||
Parameters
Returns
| ||||||
When given an activated route, applies the given commands starting from the route. Otherwise, applies the given command starting from the root. | ||||||
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}); |
| ||||||
---|---|---|---|---|---|---|
Navigate based on the provided URL, which must be absolute. | ||||||
Parameters
Returns
| ||||||
Usage Notesrouter.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. | ||||||
Parameters
Returns
| ||||||
Returns a promise that:
| ||||||
Usage Notesrouter.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 In order to affect this browser's |
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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v9.angular.io/api/router/Router