路由器出口外的组件,在路由器通过守卫重定向后没有更新其 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);
  }

有没有人对如何正确实施这个有任何想法?我的直觉是,如果您尝试加载受保护的路由,它与第一次加载应用程序的方式有关。

我想你可以使用 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();
  });
}