Question

我必须查找是否由于某些路由而刷新或加载了页面。.我认为可以使用有角度的NavigationEnd来实现；订阅路由器事件有人知道怎么做吗？请不要纯JavaScript解决方案

Answer 1

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

您可以在events实例上收听Router的声音。
将会发生很多事件。因此，您可能希望过滤掉不必要的事件，而仅使用您感兴趣的事件类型，即NavigationEnd。您可以使用Rxjs的filter运算符来实现它。
订阅NavigationEnd时，您将获得一个事件对象，该事件对象的类型为NavigationEnd。它具有urlAfterRedirects和url之类的属性，您可以利用它们来了解路由操作是否导致导航到特定组件。
在刷新/重新加载的情况下，不会触发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上的重新加载按钮，然后检查控制台上是否打印了任何内容。由于这是重新加载，因此不会打印任何内容。可以将其视为刷新/重新加载情况的确定性。

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

1 个答案: