如何确定页面是否已重新加载/刷新或在 Angular 中导航

Question

我必须确定页面是否由于某些路由而刷新或加载。

我认为可以通过ing 到路由器事件来使用 AngularRouter的NavigationEnd事件。subscribe

有人知道该怎么做吗？

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

Answer 1

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

1. events您可以在实例上监听Observable Router。
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');
        }
      });
    ...
  }

  ...

}

这是一个StackBlitz 示例供您参考。

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