W3cubDocs

/Angular 11

PathLocationStrategy

class

A LocationStrategy used to configure the Location service to represent its state in the path of the browser's URL.

See more...

class PathLocationStrategy extends LocationStrategy {
  onPopState(fn: LocationChangeListener): void
  getBaseHref(): string
  prepareExternalUrl(internal: string): string
  path(includeHash: boolean = false): string
  pushState(state: any, title: string, url: string, queryParams: string)
  replaceState(state: any, title: string, url: string, queryParams: string)
  forward(): void
  back(): void

  // inherited from common/LocationStrategy
  abstract path(includeHash?: boolean): string
  abstract prepareExternalUrl(internal: string): string
  abstract pushState(state: any, title: string, url: string, queryParams: string): void
  abstract replaceState(state: any, title: string, url: string, queryParams: string): void
  abstract forward(): void
  abstract back(): void
  abstract onPopState(fn: LocationChangeListener): void
  abstract getBaseHref(): string
}

Description

If you're using PathLocationStrategy, you must provide a APP_BASE_HREF or add a <base href> element to the document.

For instance, if you provide an APP_BASE_HREF of '/my/app/' and call location.go('/foo'), the browser's URL will become example.com/my/app/foo. To ensure all relative URIs resolve correctly, the <base href> and/or APP_BASE_HREF should end with a /.

Similarly, if you add <base href='/my/app/'/> to the document and call location.go('/foo'), the browser's URL will become example.com/my/app/foo.

Note that when using PathLocationStrategy, neither the query nor the fragment in the <base href> will be preserved, as outlined by the RFC.

Further information available in the Usage Notes...

Methods

onPopState(fn: LocationChangeListener): void

Parameters
fn LocationChangeListener
Returns

void

getBaseHref(): string

Parameters

There are no parameters.

Returns

string

prepareExternalUrl(internal: string): string

Parameters
internal string
Returns

string

path(includeHash: boolean = false): string

Parameters
includeHash boolean

Optional. Default is false.

Returns

string

pushState(state: any, title: string, url: string, queryParams: string)

Parameters
state any
title string
url string
queryParams string

replaceState(state: any, title: string, url: string, queryParams: string)

Parameters
state any
title string
url string
queryParams string

forward(): void

Parameters

There are no parameters.

Returns

void

back(): void

Parameters

There are no parameters.

Returns

void

Usage notes

Example

import {Location, LocationStrategy, PathLocationStrategy} from '@angular/common';
import {Component} from '@angular/core';

@Component({
  selector: 'path-location',
  providers: [Location, {provide: LocationStrategy, useClass: PathLocationStrategy}],
  template: `
    <h1>PathLocationStrategy</h1>
    Current URL is: <code>{{location.path()}}</code><br>
    Normalize: <code>/foo/bar/</code> is: <code>{{location.normalize('foo/bar')}}</code><br>
  `
})
export class PathLocationComponent {
  location: Location;
  constructor(location: Location) {
    this.location = location;
  }
}

© 2010–2021 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v11.angular.io/api/common/PathLocationStrategy