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

Question

我必须找到一个页面是刷新还是由于某些路由而加载。

我认为可以使用 Angular Router的 NavigationEnd事件来自 subscribe路由事件。

有谁知道怎么做？

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

Answer 1

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

您可以收听 events 在 Router 上可观察到实例。

它会随着很多事件而火。所以你可能想过滤掉不必要的事件，只使用你感兴趣的事件类型，即 NavigationEnd .你可以使用 Rxjs 的 filter 来实现它运算符(operator)。

关于订阅 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然后检查控制台上是否打印了任何内容。由于这是重新加载，因此不会打印任何内容。这可以被视为刷新/重新加载情况的确定性。