Router
class
Provides the navigation and url manipulation capabilities.
class Router { constructor(rootComponentType: Type<any> | null, 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 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 }
Description
See Routes
for more details and examples.
Constructor
Creates the router service. | ||||||||||||||||
|
rootComponentType | Type: |
urlSerializer | Type: |
rootContexts | Type: |
location | Type: |
injector | Type: |
loader | Type: |
compiler | Type: |
config | Type: |
Properties
Property | Description |
---|---|
events: Observable<Event> | Read-only. |
routerState: RouterState | Read-only. |
errorHandler: ErrorHandler | Error handler that is invoked when a navigation errors. See |
malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer, url: string) => UrlTree | Malformed uri error handler is invoked when |
navigated: boolean | Indicates if at least one navigation happened. |
urlHandlingStrategy: UrlHandlingStrategy | Extracts and merges URLs. Used for AngularJS to Angular migrations. |
routeReuseStrategy: RouteReuseStrategy | |
onSameUrlNavigation: 'reload' | 'ignore' | Define what the router should do if it receives a navigation request to the current URL. By default, the router will ignore this navigation. However, this prevents features such as a "refresh" button. Use this option to configure the behavior when navigating to the current URL. Default is 'ignore'. |
paramsInheritanceStrategy: 'emptyOnly' | 'always' | Defines how the router merges params, data and resolved data from parent to child routes. Available options are:
|
urlUpdateStrategy: 'deferred' | 'eager' | Defines when the router updates the browser URL. The default behavior is to update after successful navigation. However, some applications may prefer a mode where the URL gets updated at the beginning of navigation. The most common use case would be updating the URL early so if navigation fails, you can show an error message with the URL that failed. Available options are:
|
relativeLinkResolution: 'legacy' | 'corrected' | See |
config: Routes | Declared in constructor. |
url: string |
Read-only. The current url |
Methods
|
---|
Sets up the location change listener and performs the initial navigation. |
|
setUpLocationChangeListener() |
---|
Sets up the location change listener. |
|
resetConfig() | ||
---|---|---|
Resets the configuration used for navigation and generating links. | ||
|
config | Type: |
Returns
void
Example
router.resetConfig([ { path: 'team/:id', component: TeamCmp, children: [ { path: 'simple', component: SimpleCmp }, { path: 'user/:name', component: UserCmp } ]} ]);
ngOnDestroy() |
---|
|
dispose() |
---|
Disposes of the router |
|
createUrlTree() | ||||
---|---|---|---|---|
Applies an array of commands to the current url tree and creates a new url tree. | ||||
|
commands | Type: |
navigationExtras | Type: Optional. Default is |
Returns
When given an activate route, applies the given commands starting from the route. When not given a route, applies the given command starting from the root.
Example
// 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. This navigation is always absolute. | ||||
|
url | Type: |
extras | Type: Optional. Default is |
Returns
Promise<boolean>
Returns a promise that:
- resolves to 'true' when navigation succeeds,
- resolves to 'false' when navigation fails,
- is rejected when an error happens.
Example
router.navigateByUrl("/team/33/user/11"); // Navigate without updating the URL router.navigateByUrl("/team/33/user/11", { skipLocationChange: true });
Since navigateByUrl()
takes an absolute URL as the first parameter, it will not apply any delta to the current URL and ignores any properties in the second parameter (the NavigationExtras
) that would change the provided URL.
| ||||
---|---|---|---|---|
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute. | ||||
|
commands | Type: |
extras | Type: Optional. Default is |
Returns
Promise<boolean>
Returns a promise that:
- resolves to 'true' when navigation succeeds,
- resolves to 'false' when navigation fails,
- is rejected when an error happens.
Example
router.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 navigate()
is a delta to be applied to the current URL or the one provided in the relativeTo
property of the second parameter (the NavigationExtras
).
serializeUrl() | ||
---|---|---|
Serializes a | ||
|
url | Type: |
Returns
string
parseUrl() | ||
---|---|---|
Parses a string into a | ||
|
url | Type: |
Returns
isActive() | ||||
---|---|---|---|---|
Returns whether the url is activated | ||||
|
url | Type: |
exact | Type: |
Returns
boolean
© 2010–2019 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v6.angular.io/api/router/Router