{ "id": "api/common/PathLocationStrategy", "title": "PathLocationStrategy", "contents": "\n\n
\n
\n
\n \n API > @angular/common\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

PathLocationStrategylink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

A LocationStrategy used to configure the Location service to\nrepresent its state in the\npath of the\nbrowser's URL.

\n\n

See more...

\n
\n \n \n \n
\n\nclass PathLocationStrategy extends LocationStrategy implements OnDestroy {\n ngOnDestroy(): void\n onPopState(fn: LocationChangeListener): void\n getBaseHref(): string\n prepareExternalUrl(internal: string): string\n path(includeHash: boolean = false): string\n pushState(state: any, title: string, url: string, queryParams: string)\n replaceState(state: any, title: string, url: string, queryParams: string)\n forward(): void\n back(): void\n\n // inherited from common/LocationStrategy\n abstract path(includeHash?: boolean): string\n abstract prepareExternalUrl(internal: string): string\n abstract pushState(state: any, title: string, url: string, queryParams: string): void\n abstract replaceState(state: any, title: string, url: string, queryParams: string): void\n abstract forward(): void\n abstract back(): void\n abstract onPopState(fn: LocationChangeListener): void\n abstract getBaseHref(): string\n}\n\n\n \n \n\n
\n\n\n \n\n \n \n
\n

Descriptionlink

\n

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

\n

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

\n

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

\n

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

\n\n

Further information available in the Usage Notes...

\n
\n\n \n\n\n\n\n\n\n\n\n\n\n\n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n ngOnDestroy()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n ngOnDestroy(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n onPopState()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n onPopState(fn: LocationChangeListener): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n fn\n LocationChangeListener\n \n \n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n getBaseHref()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n getBaseHref(): string\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

string

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n prepareExternalUrl()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n prepareExternalUrl(internal: string): string\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n internal\n string\n \n \n
\n\n \n
Returns
\n

string

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n path()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n path(includeHash: boolean = false): string\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n includeHash\n boolean\n

Optional. Default is false.

\n \n
\n\n \n
Returns
\n

string

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n pushState()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n pushState(state: any, title: string, url: string, queryParams: string)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n state\n any\n \n \n
\n \n title\n string\n \n \n
\n \n url\n string\n \n \n
\n \n queryParams\n string\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n replaceState()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n replaceState(state: any, title: string, url: string, queryParams: string)\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n \n state\n any\n \n \n
\n \n title\n string\n \n \n
\n \n url\n string\n \n \n
\n \n queryParams\n string\n \n \n
\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n forward()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n forward(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n \n\n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n back()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n
\n \n\n back(): void\n\n \n\n
Parameters
\n

There are no parameters.

\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n\n \n
\n

Usage noteslink

\n

Examplelink

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