Question

我正在使用UI服务在我页面上的元素上设置外观。在每条路线上更改此服务的成员以决定标题和方式。页面样式会看起来。

示例：
如果服务成员headerStyle设置为 dark ，则黑色标题主题将用于该路由，＆amp;如果设置为 light ，则使用灯光主题＆amp;等等。

当我从＆＃39; route1 ＆＃39;更改路线时，我面临的问题是到＆＃39; route2 ＆＃39;，我必须在＆＃39; route2 ＆＃39;上手动重置服务成员。这有点单调乏味，因为这些新样式仅适用于2-3页，但我必须在所有页面上调用此服务！否则服务中的值将不会改变＆amp;前一条路线的风格保持不变。

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

这个问题很相似：
How to detect a route change in Angular 2?

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

Answer 1

订阅活动时，您可以跟踪多个导航事件。请参阅API文档。其中一个事件是NavigationStart。您也可以将Router服务注入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);
            }
        });
    }
}

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

1 个答案: