Reset service variable on route change in Angular2

Question

I am using a UI service to set the appearance on the element on my page. The member of this service are changed on each route to decide how header & page styling will look.

Example:
If service member headerStyle is set to dark, the dark header theme is used for that route, & if it is set to light, then light theme is used & so on.

The probelm I face is, when I change the route from 'route1' to 'route2', I have to manually reset the service member on 'route2'. This is somewhat tedious because these new styles are applied for only 2-3 pages, but I have to call this service on all the pages! Otherwise the values in service wont change & the style from the previous route stays as it is.

What I want to achieve is, as soon as route is change begin, reset all UI service styles to default, then when route change is complete, if new page contain new values for UI service then use those or render page using default styles.

This question is similar:
How to detect a route change in Angular 2?

But here route change event is fired after route change is done, thus no matter what code is on page, it overwrites it with default!

Answer 1

When you subscribe to events, you can track multiple navigation events. Please refer to API doc. One of these events is NavigationStart. Also you can inject Router service into your StyleService and subscribe to events 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);
            }
        });
    }
}