路由器出口外的组件，在路由器通过守卫重定向后没有更新其 window.location.href？

Question

我有一个位于路由器外部的导航组件，它使用了一个可重复使用的图标组件，该组件依赖于绝对 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 已准确更新。

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

Answer 1

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

路由器出口外的组件，在路由器通过守卫重定向后没有更新其 window.location.href？

Component outside of router-outlet, does not have its window.location.href updated after router redirect via guard?

angular

angular-router

angular-changedetection

virtual-dom