如何查找页面是否在 Angular 中重新加载/刷新或导航

Question

我必须找出页面是否因为某些路由而被刷新或加载。

我认为可以通过subscribeing 对路由器事件使用Angular Router 的NavigationEnd 事件。

有人知道怎么做吗？

请不要使用纯 JavaScript 解决方案。

Answer 1

当然，你可以这样使用它：

1. 您可以在Router 实例上收听events Observable。
2. 它将触发很多事件。所以你可能想过滤掉不必要的事件，只使用你感兴趣的事件类型，即NavigationEnd。你可以使用 Rxjs 的 filter 操作符来实现它。
3. 订阅NavigationEnd 时，您将获得一个类型为NavigationEnd 的事件对象。它具有 urlAfterRedirects 和 url 等属性，您可以利用这些属性来了解路由操作是否导致导航到特定组件。
4. 在刷新/重新加载的情况下，NavigationEnd 事件不会触发。因此，如果发生这种情况，您可以确定这是一个页面被路由到的情况。

类似这样的事情：

---

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({...})
export class YourComponent implements OnInit {

  constructor(
    ..., private router: Router, ...
  ) { }

  ngOnInit() {
    ...

    this.router.events
      .pipe(
        filter(event => event instanceof NavigationEnd)
      )
      .subscribe((event: NavigationEnd) => {
        console.log('Got the Event URL as ', event.url);
        if(event.urlAfterRedirects.includes('project')) {
          console.log('This was redirected to the Project Component');
        }
      });
    ...
  }

  ...

}

---

这里有一个Sample StackBlitz 供您参考。

PS：要确认第 4 点，只需尝试按下 StackBlitz 的 View Mode 上的重新加载按钮，然后检查控制台上是否打印任何内容。由于这是重新加载，因此不会打印任何内容。这可以被认为是刷新/重新加载情况的确定性。