在 angular 项目中检测浏览器刷新？

Question

我想在我的单页应用程序（Angular 项目）中使用路由器检测页面何时刷新

有什么替代方法吗？

Answer 1

尝试这个

  this.router.events
    .pipe(filter((rs): rs is NavigationEnd => rs instanceof NavigationEnd))
    .subscribe(event => {
      if (
        event.id === 1 &&
        event.url === event.urlAfterRedirects 
      ) {
       ..... // here your code when page is refresh
      }
    })

您将需要导入

import { filter } from 'rxjs/operators'
import { Router  } from '@angular/router';

Answer 2

在 component.ts

import { Subscription } from 'rxjs';

export let browserRefresh = false;

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements OnDestroy {

  subscription: Subscription;

  constructor(private router: Router) {
    this.subscription = router.events.subscribe((event) => {
        if (event instanceof NavigationStart) {
          browserRefresh = !router.navigated;
        }
    });
  }

在您需要的页面中

import { browserRefresh } from '../app.component';

....

  ngOnInit() {
    this.browserRefresh = browserRefresh;
    console.log('refreshed?:', browserRefresh);
  }

请参阅此处的工作示例https://stackblitz.com/edit/refreshangular?file=src%2Fapp%2Fpage-a%2Fpage-a.component.ts

点击A页&B页&刷新查看区别

Answer 3

Angular 应用程序是单页应用程序，在单页应用程序的上下文中，完整的应用程序会加载一次，并且数据或屏幕会在用户使用您的应用程序时刷新。

\n

浏览器刷新相当于关闭应用程序并再次启动它。在你的 Angular 应用程序中没有任何默认的方式来响应这个问题。

\n

您也许可以使用onBeforeUnload()来模拟一些东西来模拟某些内容，以记录应用程序已重新加载；然后检查应用程序初始化例程中的日志以执行一些特殊操作。

\n