我正在使用 UI 服务来设置页面上元素的外观。该服务的成员在每个路由上都会更改,以决定标题和页面样式的外观。
示例:
如果服务成员 headerStyle
设置为 dark,则该路由将使用深色 header 主题,如果设置为 light,则为浅色使用主题等等。
我面临的问题是,当我将路由从“route1”更改为“route2”时,我必须手动重置“”上的服务成员路线2'。这有点乏味,因为这些新样式仅应用于 2-3 个页面,但我必须在所有页面上调用此服务!否则,服务中的值不会改变,并且先前路线的样式保持不变。
我想要实现的是,一旦路由更改开始,将所有 UI 服务样式重置为默认值,然后当路由更改完成时,如果新页面包含 UI 服务的新值,则使用这些值或渲染使用默认样式的页面。
这个问题类似:
How to detect a route change in Angular 2?
但是这里的路由更改事件是在路由更改完成后触发的,因此无论页面上有什么代码,它都会用默认值覆盖它!
最佳答案
订阅事件时,您可以跟踪多个导航事件。请引用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);
}
});
}
}
关于javascript - 在 Angular2 中重置路由更改时的服务变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41465867/