\nProvides the navigation and url manipulation capabilities.<\/p>\n
Overview
\nclass Router {
\nconstructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)
\nget events: Observable<Event>
\nget routerState: RouterState
\nerrorHandler: ErrorHandler
\nnavigated: boolean
\nurlHandlingStrategy: UrlHandlingStrategy
\nrouteReuseStrategy: RouteReuseStrategy
\nonSameUrlNavigation: ‘reload’ | ‘ignore’
\nparamsInheritanceStrategy: ’emptyOnly’ | ‘always’
\nconfig: Routes
\ninitialNavigation(): void
\nsetUpLocationChangeListener(): void
\nget url: string
\nresetConfig(config: Routes): void
\nngOnDestroy(): void
\ndispose(): void
\ncreateUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree
\nnavigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
\nnavigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean>
\nserializeUrl(url: UrlTree): string
\nparseUrl(url: string): UrlTree
\nisActive(url: string | UrlTree, exact: boolean): boolean
\n}<\/p>\n
Constructor
\nconstructor(rootComponentType: Type<any> | null, urlSerializer: UrlSerializer, rootContexts: ChildrenOutletContexts, location: Location, injector: Injector, loader: NgModuleFactoryLoader, compiler: Compiler, config: Routes)<\/p>\n
Creates the router service.<\/p>\n
Members
\nget events: Observable<Event>
\nget routerState: RouterState<\/p>\n
errorHandler: ErrorHandler
\nError handler that is invoked when a navigation errors.<\/p>\n
navigated: boolean
\nIndicates if at least one navigation happened.<\/p>\n
urlHandlingStrategy: UrlHandlingStrategy
\nExtracts and merges URLs. Used for AngularJS to Angular migrations.<\/p>\n
routeReuseStrategy: RouteReuseStrategy
\nonSameUrlNavigation: ‘reload’ | ‘ignore’
\nDefine 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’.<\/p>\n
paramsInheritanceStrategy: ’emptyOnly’ | ‘always’
\nDefines how the router merges params, data and resolved data from parent to child routes. Available options are:<\/p>\n
’emptyOnly’, the default, only inherits parent params for path-less or component-less routes.
\n‘always’, enables unconditional inheritance of parent params.<\/p>\n
config: Routes
\ninitialNavigation(): void
\nSets up the location change listener and performs the initial navigation.<\/p>\n
setUpLocationChangeListener(): void
\nSets up the location change listener.<\/p>\n
get url: string
\nThe current url<\/p>\n
resetConfig(config: Routes): void
\nResets the configuration used for navigation and generating links.<\/p>\n
Usage
\nrouter.resetConfig([
\n{ path: ‘team\/:id’, component: TeamCmp, children: [
\n{ path: ‘simple’, component: SimpleCmp },
\n{ path: ‘user\/:name’, component: UserCmp }
\n]}
\n]);<\/p>\n
ngOnDestroy(): void
\ndispose(): void
\nDisposes of the router<\/p>\n
createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree<\/p>\n
Applies an array of commands to the current url tree and creates a new url tree.<\/p>\n
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.
\nUsage<\/p>\n
\/\/ create \/team\/33\/user\/11
\nrouter.createUrlTree([‘\/team’, 33, ‘user’, 11]);<\/p>\n
\/\/ create \/team\/33;expand=true\/user\/11
\nrouter.createUrlTree([‘\/team’, 33, {expand: true}, ‘user’, 11]);<\/p>\n
\/\/ you can collapse static segments like this (this works only with the first passed-in value):
\nrouter.createUrlTree([‘\/team\/33\/user’, userId]);<\/p>\n
\/\/ If the first segment can contain slashes, and you do not want the router to split it, you
\n\/\/ can do the following:<\/p>\n
router.createUrlTree([{segmentPath: ‘\/one\/two’}]);<\/p>\n
\/\/ create \/team\/33\/(user\/11\/\/right:chat)
\nrouter.createUrlTree([‘\/team’, 33, {outlets: {primary: ‘user\/11’, right: ‘chat’}}]);<\/p>\n
\/\/ remove the right secondary node
\nrouter.createUrlTree([‘\/team’, 33, {outlets: {primary: ‘user\/11’, right: null}}]);<\/p>\n
\/\/ assuming the current url is `\/team\/33\/user\/11` and the route points to `user\/11`<\/p>\n
\/\/ navigate to \/team\/33\/user\/11\/details
\nrouter.createUrlTree([‘details’], {relativeTo: route});<\/p>\n
\/\/ navigate to \/team\/33\/user\/22
\nrouter.createUrlTree([‘..\/22’], {relativeTo: route});<\/p>\n
\/\/ navigate to \/team\/44\/user\/22
\nrouter.createUrlTree([‘..\/..\/team\/44\/user\/22’], {relativeTo: route});<\/p>\n
navigateByUrl(url: string | UrlTree, extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean><\/p>\n
Navigate based on the provided url. This navigation is always absolute.<\/p>\n
Returns a promise that:<\/p>\n
resolves to ‘true’ when navigation succeeds,
\nresolves to ‘false’ when navigation fails,
\nis rejected when an error happens.<\/p>\n
Usage
\nrouter.navigateByUrl(“\/team\/33\/user\/11”);<\/p>\n
\/\/ Navigate without updating the URL
\nrouter.navigateByUrl(“\/team\/33\/user\/11”, { skipLocationChange: true });<\/p>\n
In opposite to navigate, navigateByUrl takes a whole URL and does not apply any delta to the current one.<\/p>\n
navigate(commands: any[], extras: NavigationExtras = { skipLocationChange: false }): Promise<boolean><\/p>\n
Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.<\/p>\n
Returns a promise that:<\/p>\n
resolves to ‘true’ when navigation succeeds,
\nresolves to ‘false’ when navigation fails,
\nis rejected when an error happens.<\/p>\n
Usage<\/p>\n
router.navigate([‘team’, 33, ‘user’, 11], {relativeTo: route});<\/p>\n
\/\/ Navigate without updating the URL
\nrouter.navigate([‘team’, 33, ‘user’, 11], {relativeTo: route, skipLocationChange: true});<\/p>\n
In opposite to navigateByUrl, navigate always takes a delta that is applied to the current URL.<\/p>\n
serializeUrl(url: UrlTree): string
\nSerializes a UrlTree into a string<\/p>\n
parseUrl(url: string): UrlTree
\nParses a string into a UrlTree<\/p>\n
isActive(url: string | UrlTree, exact: boolean): boolean
\nReturns whether the url is activated<\/p>\n
IT Professionals, Web Developers, web programmers, IT students can Apply for the certification course and get ahead.<\/strong><\/p>\n
![\"\"](\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2018\/04\/Angular-4.png\")
<\/a><\/p>\n![\"Angular](\"http:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/05\/Back-Arrow.jpg\"){kind=icon}
Back to Angular 4 Tutorial Main Page <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"