`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

How can I ensure that Chakra UI MenuList items are always visible on the screen?

Make your CSS and JS files smaller by using a PHP compression script in your WordPress child theme

When utilizing jQuery in HTML, the Marquee will bounce back upon reaching the end

TypeScript Add Extract Kind

When attempting to validate dates with the after: rule in vee-validate while also utilizing a computed field in Vue.js, the validation process may encounter unexpected issues

Unable to retrieve data from the array

Utilizing the Bing Translation API to translate an entire webpage

What steps should be taken to enable SCSS in Jest for unit testing in TypeScript Next.js?

Learn how to display separate paragraphs upon clicking a specific item

Tips for preventing the ngbTypeahead input field from automatically opening when focused until all data is fully mapped

Encountering a Node.js error when executing the JavaScript file

Exploring the vueJS canvas life cycle and transitioning between components

Modify an element on one webpage using a function called from another webpage

Updating the HTML class with JavaScript

Issue with Vue: Calling method instantly when using :mouseover in v-for within a component

Activate a particular panel within the leftPanel using PDFNet Webviewer

Use Jquery to apply quotation marks within a blockquote

Position the label and the select dropdown side by side within the sweetalert 2 component

increasing the size of the input thumb compared to the others

Update the child component whenever there are changes in the variables of the parent component in Angular 2