以角度处理浏览器刷新按钮

Question

我需要使浏览器刷新，Angular中的向后和向前按钮为假。我通过使用onPopState事件处理了后退按钮和前按钮。是否有任何事件可以处理刷新按钮？我尝试使用window：beforeunload和window：onunload事件，但是没有用。

注意： window：beforeunload和window：onunload事件在启动应用程序时起作用，我只需要触发浏览器刷新按钮即可。

Answer 1

如果要检测使用Angular刷新浏览器，则需要查看Angular Router。专门针对导航属性。当路由器启动时，此属性为false；在第一次导航后，此属性更改为true。

// in the constructor of you App Component
constructor(private router: Router) {
  this.subscription = router.events.subscribe((event) => {
    if (event instanceof NavigationStart) {
      browserRefresh = !router.navigated;
    }
  });
}

您可以通过此功能设置所需的属性。

Answer 2

您可以在Angular中使用旋转变压器来实现此目的。由此，您将能够分别处理浏览器对不同路由的刷新。当单击链接并且加载组件之前，解析器将执行一些中间代码。

1. 创建实现解决的服务类

   import { Injectable } from '@angular/core';
   import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
   
   @Injectable()
   export class PathOneResolver implements Resolve<any> {
     constructor(
     ) { }
   
     resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
       // Make the subject false
       console.log('Browser Refresh on Path1');
     }
   }
   

2. 将解析程序服务注册在提供程序下的module.ts文件中

   import { PathOneResolver } from './services/worklist.resolver';
   
   @NgModule({
     providers: [ PathOneResolver ]
   })
   

3. 在您的路线中添加解析器

   import { Routes } from '@angular/router';
   import { PathOneResolver } from './services/worklist.resolver';
   import { PathOneComponent} from '../main/components/pathone.component';
   import { BaseComponent } from '../main/components/base/base.component';
   
   export const approvalRoutes: Routes = [  
      { path: '', component: BaseComponent },  
      { path: 'pathone', component: PathOneComponent, resolve: 
        { pathone: PathOneResolver}}, 
   ];