`Upkeeping service variable upon route alteration in Angular 2`

Question

`Upkeeping service variable upon route alteration in Angular 2`

Utilizing a UI service to control the styling of elements on my webpage is essential. The members of this service change with each route, determining how the header and page will look.

For example:
If the headerStyle member of the service is set to dark, the dark header theme is applied for that specific route. If it is set to light, then the light theme takes over, and so forth.

The issue I encounter is when transitioning from 'route1' to 'route2', I must manually reset the service member for 'route2'. This becomes cumbersome as the new styles are only applicable to 2-3 pages, yet I still need to call the service on every page. Failure to do so means the values in the service remain unchanged, retaining the style from the previous route.

What I aim to achieve is this: once the route begins to change, all UI service styles should reset to default. Then, upon completion of the route change, if the new page has different values for the UI service, those should be applied; otherwise, render the page using default styles.

A similar question has been raised here:
How to detect a route change in Angular 2?

The challenge lies in the fact that the route change event fires after the transition is complete, ultimately overriding any code present on the page with default settings!

javascript angular typescript angular2-routing

Answer 1

Answer №1

By subscribing to events, it is possible to monitor various navigation occurrences. Detailed information can be found in the API documentation. One important event to note is NavigationStart. Another approach is to include the Router service in your StyleService and subscribe to events from there:

@Injectable()
export class StyleService{
    constructor(private router: Router){
        router.events.subscribe((val) => {
            if (val instanceof NavigationStart) {
                this.resetStyle();
            }

            if (val instanceof NavigationEnd) {
                this.setStyle(router.routerState);
            }
        });
    }
}

Answer 2

By subscribing to events, it is possible to monitor various navigation occurrences. Detailed information can be found in the API documentation. One important event to note is NavigationStart. Another approach is to include the Router service in your StyleService and subscribe to events from there:

@Injectable()
export class StyleService{
    constructor(private router: Router){
        router.events.subscribe((val) => {
            if (val instanceof NavigationStart) {
                this.resetStyle();
            }

            if (val instanceof NavigationEnd) {
                this.setStyle(router.routerState);
            }
        });
    }
}

`Upkeeping service variable upon route alteration in Angular 2`

Answer №1

Similar questions

Encountering an issue with Apollo Express GraphQL: Error message stating that the schema must have distinct type names, yet it contains more than one type named "DateTime"

Always keep your phone in landscape orientation for optimal website viewing

Typescript versus ES5: A comparison of Node.js server-side applications written in different languages

Angular : Is toFixed() functioning properly with one value but not with the other one?

I'm looking for a way to modify the Turkish characters and spaces in the names of JSON data objects. I plan to do this using WebApi

Displaying text and concealing image when hovering over a column in an angular2 table

Using Javascript, incorporate a string variable into the response

Develop a library of components using TypeScript and Less files

Tips for incorporating 'and' in the 'on' clause of 'join' in knex.js

Automatically log into Google using Angular with Angularx-Social-Login

Tips for preventing click events from interfering with execution in React

Transferring the link value to an AJAX function when the onclick event is triggered

Postpone the NgModule declaration by importing the module asynchronously

Having trouble making "jQuery.inArray" function properly in my code

What could be causing my external JavaScript file to not function properly upon loading my HTML file?

Error: Attempting to initiate a backward navigation action while already in the process. Utilizing Natiescript

beforeunload event confirmation prompt

The value entered for creating a payment method is invalid: the card must be in the form of an object

How can I use jQuery to create a new div element if it is not already present

Implementing an animation feature to facilitate the item filtering process when clicked on