在Angular2中重置路由更改时的服务变量

Question

我正在使用UI服务来设置页面上元素的外观。此服务的成员将在每个路由上进行更改，以决定标题和页面样式的外观。

示例：

如果服务成员headerStyle设置为黑暗，则该路由将使用暗头主题&如果设置为light，则使用light &以此类推。

我面临的问题是，当我将路由从“route1”更改为“route 2”时，必须手动将服务成员重置为“route 2”。这有点乏味，因为这些新样式仅适用于2-3页，但我必须在所有页面上调用此服务！否则，服务中的值不会改变&来自前一条路由的样式将保持原样。

我想要实现的是，一旦路由更改开始，将所有UI服务样式重置为默认，然后当路由更改完成时，如果新页面包含UI服务的新值，则使用这些值或使用默认样式呈现页面。

这个问题也是类似的：

How to detect a route change in Angular 2?

但是在这里，路由更改事件是在路由更改完成后触发的，因此，不管页面上有什么代码，它都会以默认方式覆盖它！

Answer 1

订阅事件时，可以跟踪多个导航事件。请参阅API文档。其中一个事件是NavigationStart。此外，您还可以将路由器服务插入到您的StyleService中，并订阅那里的事件：

@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);
            }
        });
    }
}