Angular 仅在导航到不同组件时检测路由更改

Question

我仅在导航到我的应用程序中的不同组件时才尝试在路由更改(即滚动到顶部)时做某事，而不是在停留在同一组件上并且只是通过路由更改其 View 到具有不同查询参数的同一组件时

例如，如果我在 /products?category=kitchen我导航到 /products?category=bedroom我不希望执行该操作(即滚动到顶部)。

这是我的 app.component.ts 中的代码:

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
  // Would like to check here if user navigates to different component
  if (window) window.scrollTo(0, 0);
});

有谁知道我怎么能做到这一点？

Answer 1

我想分享一下我是如何解决这个问题的，以防将来有人会遇到类似的事情:

private componentBeforeNavigation = null;
  private setScrollToTopOnNavigation() {
    // Scroll to top only when navigating to a different component
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      let currentRoute = this.route;
      while (currentRoute.firstChild) currentRoute = currentRoute.firstChild;
      if (this.componentBeforeNavigation !== currentRoute.component) {
        if (window) window.scrollTo(0, 0);
      }
      this.componentBeforeNavigation = currentRoute.component;
    });
  }

这段代码正在做的是使用名为 componentBeforeNavigation 的组件的私有(private)属性。最初是 null并且每次触发 Navigation 事件时， subscribe 中的代码检查我现在导航的地方是否与上次导航相同。如果是，这意味着它是对同一组件的导航，并且我没有执行我的特殊操作(在这种情况下滚动到窗口顶部)，如果不是，则意味着它是对新组件的导航。
一件重要的事情是将我正在导航到的新组件存储在属性 componentBeforeNavigation 中。所以它总是用最后一次导航更新