File

libs/common/web-components/src/web-component-location-strategy/web-component-location-strategy.ts

Extends

LocationStrategy

Index

Methods

Constructor

constructor(_platformLocation: PlatformLocation, webComponentName: string, href: string)
Parameters :
Name Type Optional
_platformLocation PlatformLocation No
webComponentName string No
href string No

Methods

back
back()
Returns : void
forward
forward()
Returns : void
getBaseHref
getBaseHref()
Returns : string
getState
getState()
historyGo
historyGo(relativePosition: number)
Parameters :
Name Type Optional Default value
relativePosition number No 0
Returns : void
ngOnDestroy
ngOnDestroy()
Returns : void
onPopState
onPopState(fn: LocationChangeListener)
Parameters :
Name Type Optional
fn LocationChangeListener No
Returns : void
path
path()
Returns : string
prepareExternalUrl
prepareExternalUrl(url: string)
Parameters :
Name Type Optional
url string No
Returns : string
pushState
pushState(state, title: string, url: string)
Parameters :
Name Type Optional
state No
title string No
url string No
Returns : void
replaceState
replaceState(state, title: string, url: string)
Parameters :
Name Type Optional
state No
title string No
url string No
Returns : void
import {
  APP_BASE_HREF,
  LocationChangeListener,
  LocationStrategy,
  PlatformLocation
} from '@angular/common';
import { Inject, Injectable, OnDestroy, Optional } from '@angular/core';
import { WEB_COMPONENT_ID } from '../utils/tokens';
import { extractWebComponentRoutesFromHash, upsertWebComponentRoutesInHash } from '../utils/utils';

@Injectable()
export class WebComponentLocationStrategy extends LocationStrategy implements OnDestroy {
  private _baseHref: string;
  private _removeListenerFns: (() => void)[] = [];

  constructor(
    private _platformLocation: PlatformLocation,
    @Inject(WEB_COMPONENT_ID) private webComponentName: string,
    @Optional() @Inject(APP_BASE_HREF) href: string
  ) {
    super();

    if (!href) {
      href = this._platformLocation.getBaseHrefFromDOM();
    }

    if (!href) {
      // No APP_BASE_HREF given and no <base> element present in
      // this document. As this will be part of a web component we don't
      // really care since we only rely on the DEPLOY_URL.
      // Using empty string as a fallback.
      href = '';
    }

    this._baseHref = href;
  }

  ngOnDestroy() {
    this._removeListenerFns.forEach((removeListenerFn) => removeListenerFn());
    this._removeListenerFns.length = 0;
  }

  override getBaseHref(): string {
    return this._baseHref;
  }

  override path(): string {
    const hash = this._platformLocation.hash;
    const routes = extractWebComponentRoutesFromHash(hash);
    return routes[this.webComponentId] ?? '';
  }

  override prepareExternalUrl(url: string): string {
    const path = this._platformLocation.pathname;
    const hash = this._platformLocation.hash ?? '';
    const updatedHash = upsertWebComponentRoutesInHash(this.webComponentId, url, hash);
    const prefixedHash = updatedHash.startsWith('#') ? updatedHash : '#' + updatedHash;
    return path + prefixedHash;
  }

  override pushState(state: unknown, title: string, url: string): void {
    const hash = this.prepareExternalUrl(url);
    this._platformLocation.pushState(state, title, hash);
  }

  override replaceState(state: unknown, title: string, url: string): void {
    const hash = this.prepareExternalUrl(url);
    this._platformLocation.replaceState(state, title, hash);
  }

  override onPopState(fn: LocationChangeListener) {
    this._removeListenerFns.push(
      this._platformLocation.onPopState(fn),
      this._platformLocation.onHashChange(fn)
    );
  }

  override forward(): void {
    this._platformLocation.forward();
  }

  override back(): void {
    this._platformLocation.back();
  }

  override historyGo(relativePosition = 0): void {
    this._platformLocation.historyGo?.(relativePosition);
  }

  override getState(): unknown {
    return this._platformLocation.getState();
  }

  // turns any whitespace in the web component name into underscores
  private get webComponentId() {
    return this.webComponentName.replace(/ /g, '_');
  }
}

results matching ""

    No results matching ""