Hidden back navigation strategy in AngularJS 2 with location strategy

Question

Hidden back navigation strategy in AngularJS 2 with location strategy

After creating a custom LocationStrategy to disable browser location bar changes, I am now looking to integrate smaller apps into various web pages without affecting the browser's location. While navigation works smoothly with this new strategy, I am facing a challenge in implementing a back()-function for navigation. Calling window.back() is no longer an option and there seems to be no internal method within Angular sources that can achieve this. Perhaps directly calling LocationStrategy.back() could work, but then I need a way to update the router for the current view. Is there an event that can be triggered or another solution to refresh the view?

Below is the current implementation of my custom location strategy:

import { Injectable, Inject, Optional, platform } from 'angular2/core';
import { LocationStrategy, PlatformLocation, APP_BASE_HREF, } from 'angular2/router';
import { joinWithSlash, normalizeQueryParams } from 'angular2/src/router/location_strategy';
import { UrlChangeListener } from 'angular2/src/router/location/platform_location';
import { isPresent } from 'angular2/src/facade/lang';

@Injectable()
export class HiddenLocationStrategy extends LocationStrategy {
    private _baseHref: string = '';
    private pathHistory: string[] = [];
    private poppedPathHistory: string[] = [];
    constructor(private _platformLocation: PlatformLocation,
        @Optional() @Inject(APP_BASE_HREF) _baseHref?: string) {
        super();
        if (isPresent(_baseHref)) {
            this._baseHref = _baseHref;
        }
    }

    onPopState(fn: UrlChangeListener): void {
    }

    getBaseHref(): string { return this._baseHref }

    path(): string {
        return this.pathHistory.length > 0 ? this.pathHistory[this.pathHistory.length - 1] : '';
    }

    prepareExternalUrl(internal: string): string {
        var url = joinWithSlash(this._baseHref, internal);
        return url;
    }

    pushState(state: any, title: string, path: string, queryParams: string) {
        this.pathHistory.push(path);
    }

    replaceState(state: any, title: string, path: string, queryParams: string) {
    }

    forward(): void { this.pathHistory.push(this.poppedPathHistory.pop()); }

    back(): void { this.poppedPathHistory.push(this.pathHistory.pop()); }
}

typescript angular

Answer 1

Answer №1

To enhance the functionality, I recommend creating a personalized PlatformLocation and utilizing its forward() and back() methods.

The

abstract onPopState(fn: UrlChangeListener): void;
abstract onHashChange(fn: UrlChangeListener): void;

are the events that the router listens for.

For more information, refer to https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate.

Answer 2

To enhance the functionality, I recommend creating a personalized PlatformLocation and utilizing its forward() and back() methods.

The

abstract onPopState(fn: UrlChangeListener): void;
abstract onHashChange(fn: UrlChangeListener): void;

are the events that the router listens for.

For more information, refer to https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onpopstate.

Answer 3

Answer №2

To implement the solution, we utilize the history.pushState API by incorporating logic within the pushState method to track an incrementing identifier (along with other desired state information). Further logic is added in the onPopState method to determine whether the popped state signifies a backward or forward navigation. Several of PlatformLocation's methods are then encapsulated within this implementation.

import { APP_BASE_HREF, LocationStrategy, PlatformLocation, Location, LocationChangeListener } from '@angular/common';
import { Inject, Injectable, Optional } from '@angular/core';
import { isPresent } from '@angular/common/src/facade/lang';


export interface HistoryState {
    state: any;
    title: string;
    path: string;
}

@Injectable()
export class HiddenLocationStrategy extends LocationStrategy {
    private baseHref: string = '';
    private pathHistory: HistoryState[] = [];
    private poppedPathHistory: HistoryState[] = [];

    constructor(
        private platformLocation: PlatformLocation,
        @Optional() @Inject(APP_BASE_HREF) baseHref?: string
    ) {
        super();

        if (isPresent(baseHref)) {
            this.baseHref = baseHref;
        }
    }

    onPopState(fn: LocationChangeListener): void {
        this.platformLocation.onPopState((ev: PopStateEvent) => {
            let backward = this.pathHistory.find((item) => item.state.uid === ev.state.uid);
            let forward = this.poppedPathHistory.find((item) => item.state.uid === ev.state.uid);

            if (backward) {
                this.navigateBack();
            } else if (forward) {
                this.navigateForward();
            }

            fn(ev);
        });
        //this.platformLocation.onHashChange(fn);
    }

    getBaseHref(): string {
        return this.baseHref;
    }

    path(): string {
        return this.pathHistory.length > 0
            ? this.pathHistory[this.pathHistory.length - 1].path
            : '';
    }

    prepareExternalUrl(internal: string): string {
        return Location.joinWithSlash(this.baseHref, internal);
    }

    pushState(state: any, title: string, path: string, queryParams: string) {
        state = Object.assign({}, state, {
            uid: (new Date()).valueOf()
        });

        this.pathHistory.push({
            state: state,
            title: title,
            path: path
        });

        this.platformLocation.pushState(state, title, this.prepareExternalUrl(''));
    }

    replaceState(state: any, title: string, path: string, queryParams: string) {
        this.platformLocation.replaceState(state, title, path);
    }

    forward(): void {
        this.platformLocation.forward();
    }

    back(): void {
        this.platformLocation.back();
    }

    private navigateForward() {
        this.pathHistory.push(this.poppedPathHistory.pop());
    }

    private navigateBack() {
        this.poppedPathHistory.push(this.pathHistory.pop());
    }
}

Answer 4

To implement the solution, we utilize the history.pushState API by incorporating logic within the pushState method to track an incrementing identifier (along with other desired state information). Further logic is added in the onPopState method to determine whether the popped state signifies a backward or forward navigation. Several of PlatformLocation's methods are then encapsulated within this implementation.

import { APP_BASE_HREF, LocationStrategy, PlatformLocation, Location, LocationChangeListener } from '@angular/common';
import { Inject, Injectable, Optional } from '@angular/core';
import { isPresent } from '@angular/common/src/facade/lang';


export interface HistoryState {
    state: any;
    title: string;
    path: string;
}

@Injectable()
export class HiddenLocationStrategy extends LocationStrategy {
    private baseHref: string = '';
    private pathHistory: HistoryState[] = [];
    private poppedPathHistory: HistoryState[] = [];

    constructor(
        private platformLocation: PlatformLocation,
        @Optional() @Inject(APP_BASE_HREF) baseHref?: string
    ) {
        super();

        if (isPresent(baseHref)) {
            this.baseHref = baseHref;
        }
    }

    onPopState(fn: LocationChangeListener): void {
        this.platformLocation.onPopState((ev: PopStateEvent) => {
            let backward = this.pathHistory.find((item) => item.state.uid === ev.state.uid);
            let forward = this.poppedPathHistory.find((item) => item.state.uid === ev.state.uid);

            if (backward) {
                this.navigateBack();
            } else if (forward) {
                this.navigateForward();
            }

            fn(ev);
        });
        //this.platformLocation.onHashChange(fn);
    }

    getBaseHref(): string {
        return this.baseHref;
    }

    path(): string {
        return this.pathHistory.length > 0
            ? this.pathHistory[this.pathHistory.length - 1].path
            : '';
    }

    prepareExternalUrl(internal: string): string {
        return Location.joinWithSlash(this.baseHref, internal);
    }

    pushState(state: any, title: string, path: string, queryParams: string) {
        state = Object.assign({}, state, {
            uid: (new Date()).valueOf()
        });

        this.pathHistory.push({
            state: state,
            title: title,
            path: path
        });

        this.platformLocation.pushState(state, title, this.prepareExternalUrl(''));
    }

    replaceState(state: any, title: string, path: string, queryParams: string) {
        this.platformLocation.replaceState(state, title, path);
    }

    forward(): void {
        this.platformLocation.forward();
    }

    back(): void {
        this.platformLocation.back();
    }

    private navigateForward() {
        this.pathHistory.push(this.poppedPathHistory.pop());
    }

    private navigateBack() {
        this.poppedPathHistory.push(this.pathHistory.pop());
    }
}

Hidden back navigation strategy in AngularJS 2 with location strategy

Answer №1

Answer №2

Similar questions

Angular 2 BehaviorSubject filtering technique

Can a personalized component be displayed as a tooltip?

What is the reason for TypeScript not displaying a type mismatch error in this particular instance?

Generate an object in Typescript that includes a dynamic property calculated from an input parameter

The connection status of socket.io is always inactive

Encountering an unexpected token while trying to use createUserWithEmailAndPassword in firebase/auth with Next.js and TypeScript left Jest puzzled

What is the best way to organize objects based on their timestamps?

What is the best way to implement function chaining in TypeScript?

Is Angular CLI incorrectly flagging circular dependencies for nested Material Dialogs?

Dynamic value for href in div using Angular

Tips for implementing a real-time search feature in Angular

Enhance your Vuex action types in Typescript by adding new actions or extending existing

Using ngClass with template literals to dynamically alter its value

I am receiving null values for my environment variables

Test for comparing objects partially using Jasmine Array

When using React MUI Autocomplete, make sure to handle the error that occurs when trying to filter options using the

How can I update a property within an object in a sequential manner, similar to taking turns in a game, using React.js?

Ways to address the issue arising from the utilization of the "as" keyword

Using TypeScript and React: Implementing interfaces based on props conditions

There was an error in Angular at core.js:6150 stating that the object is not iterable due to a