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

Question

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

示例:
如果服务成员 headerStyle 设置为 dark，则该路由将使用深色 header 主题，如果设置为 light，则为浅色使用主题等等。

我面临的问题是，当我将路由从“route1”更改为“route2”时，我必须手动重置“”上的服务成员路线2'。这有点乏味，因为这些新样式仅应用于 2-3 个页面，但我必须在所有页面上调用此服务!否则，服务中的值不会改变，并且先前路线的样式保持不变。

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

这个问题类似:
How to detect a route change in Angular 2?

但是这里的路由更改事件是在路由更改完成后触发的，因此无论页面上有什么代码，它都会用默认值覆盖它!

Answer 1

订阅事件时，您可以跟踪多个导航事件。请引用API文档。这些事件之一是 NavigationStart。您还可以将 Router 服务注入(inject) 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);
            }
        });
    }
}