References
Oleksa Novyk | GitHub

Router

Provides the navigation and url manipulation capabilities.

Example

Imperative navigation:

export class AppComponent {
  constructor(private router: Router) {
  }

  navigateToHome() {
    this.router.navigate('/home');
  }
}

Interface

config#

config: Routes

Routes configuration.

createUrlTree#

createUrlTree(commands: any[], navigationExtras: NavigationExtras = {}): UrlTree

Applies an array of commands to the current url tree and creates a new url tree.

dispose#

dispose(): void

Disposes of the router.

errorHandler#

errorHandler: ErrorHandler

Error handler that is invoked when a navigation errors.

events#

events: Observable<Event>

Observable that provides all routing events.

getCurrentNavigation#

getCurrentNavigation(): Navigation|null

The current Navigation object if one exists

initialNavigation#

initialNavigation(): void

Sets up the location change listener and performs the initial navigation.

isActive#

isActive(url: string|UrlTree, exact: boolean): boolean

Returns whether the url is activated.

malformedUriErrorHandler#

malformedUriErrorHandler: (error: URIError, urlSerializer: UrlSerializer,
       url: string) => UrlTree

Malformed uri error handler is invoked when Router.parseUrl(url) throws an error due to containing an invalid character. The most common case would be a % sign that's not encoded and is not part of a percent encoded sequence.

navigate(commands: any[], extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean>

Navigate based on the provided array of commands and a starting point. If no starting route is provided, the navigation is absolute.

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).

navigateByUrl(url: string|UrlTree, extras: NavigationExtras = {skipLocationChange: false}): Promise<boolean>

Navigate based on the provided url. This navigation is always absolute.

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.

navigated: boolean

Indicates if at least one navigation happened.

onSameUrlNavigation#

onSameUrlNavigation: 'reload'|'ignore'

Define what the router should do if it receives a navigation request to the current URL.

paramsInheritanceStrategy#

paramsInheritanceStrategy: 'emptyOnly'|'always'

Defines how the router merges params, data and resolved data from parent to child routes. More info in the configuration section.

parseUrl#

parseUrl(url: string): UrlTree

Parses a string into a UrlTree.

relativeLinkResolution#

relativeLinkResolution: 'legacy'|'corrected'

See {@link RouterModule} for more information.

resetConfig#

resetConfig(config: Routes): void

Resets the configuration used for navigation and generating links.

routeReuseStrategy#

routeReuseStrategy: RouteReuseStrategy

-

routerState#

routerState: RouterState

Contains current router state.

serializeUrl#

serializeUrl(url: UrlTree): string

Serializes a UrlTree into a string.

setUpLocationChangeListener#

setUpLocationChangeListener(): void

Sets up the location change listener.

url#

get url(): string

The current url.

urlHandlingStrategy#

urlHandlingStrategy: UrlHandlingStrategy

Extracts and merges URLs. Used for AngularJS to Angular migrations.

urlUpdateStrategy#

urlUpdateStrategy: 'deferred'|'eager'

Defines when the router updates the browser URL. More info in the configuration section.