4

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

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

有谁知道该怎么做？

请不要纯javascript解决方案。

4

1 回答 1

6

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

  1. 您可以在实例上收听eventsObservable 。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：要确认第 4 点，只需尝试按下 StackBlitz 的查看模式上的重新加载按钮，然后检查控制台上是否打印任何内容。由于这是重新加载，因此不会打印任何内容。这可以被认为是刷新/重新加载情况的确定性。

于 2018-11-27T19:12:32.193 回答