路由器出口外的组件,在路由器通过守卫重定向后没有更新其 window.location.href?
Component outside of router-outlet, does not have its window.location.href updated after router redirect via guard?
我有一个位于路由器外部的导航组件,它使用了一个可重复使用的图标组件,该组件依赖于绝对 url 指向 SVG 图标,该图标通过 getter 检索在组件内:
public get absUrl(): string {
return window.location.href.split('#')[0];
}
不幸的是,当从 guard 触发时,重定向视图未使用新的 abs url 更新。
我已经用 setTimeout 做了一个解决方法,但它超级 hacky -- 它纯粹是为了证明链中存在一些延迟导致了问题,因为最终 window.location.href
的值是正确的。
解决方法如下:
public absUrl = window.location.href.split('#')[0];
ngAfterViewInit() {
setTimeout(() => {
this.absUrl = window.location.href.split('#')[0];
this.ref.detectChanges();
}, 200);
}
- 只有在受保护的路径加载整个应用程序时,加载应用程序后尝试随后访问受保护的路径才能正常工作。
- 当在不存在的路径上加载整个应用程序并被重定向到 /404 时会发生这种情况
- 如果我设置 0 - 100ms 超时,它不会及时更新
- 通过 router-outlet 加载的组件有效,图标中的 abs url 已准确更新。
有没有人对如何正确实施这个有任何想法?我的直觉是,如果您尝试加载受保护的路由,它与第一次加载应用程序的方式有关。
我想你可以使用 Location
服务做这样的事情:
public absUrl = window.location.href.split('#')[0];
constructor(location: Location, ref: ChangeDetectorRef) {
location.onUrlChange((s) => {
this.absUrl = window.location.href.split('#')[0]);
ref.detectChanges();
});
}
我有一个位于路由器外部的导航组件,它使用了一个可重复使用的图标组件,该组件依赖于绝对 url 指向 SVG 图标,该图标通过 getter 检索在组件内:
public get absUrl(): string {
return window.location.href.split('#')[0];
}
不幸的是,当从 guard 触发时,重定向视图未使用新的 abs url 更新。
我已经用 setTimeout 做了一个解决方法,但它超级 hacky -- 它纯粹是为了证明链中存在一些延迟导致了问题,因为最终 window.location.href
的值是正确的。
解决方法如下:
public absUrl = window.location.href.split('#')[0];
ngAfterViewInit() {
setTimeout(() => {
this.absUrl = window.location.href.split('#')[0];
this.ref.detectChanges();
}, 200);
}
- 只有在受保护的路径加载整个应用程序时,加载应用程序后尝试随后访问受保护的路径才能正常工作。
- 当在不存在的路径上加载整个应用程序并被重定向到 /404 时会发生这种情况
- 如果我设置 0 - 100ms 超时,它不会及时更新
- 通过 router-outlet 加载的组件有效,图标中的 abs url 已准确更新。
有没有人对如何正确实施这个有任何想法?我的直觉是,如果您尝试加载受保护的路由,它与第一次加载应用程序的方式有关。
我想你可以使用 Location
服务做这样的事情:
public absUrl = window.location.href.split('#')[0];
constructor(location: Location, ref: ChangeDetectorRef) {
location.onUrlChange((s) => {
this.absUrl = window.location.href.split('#')[0]);
ref.detectChanges();
});
}