Angular 检测角度项目中的浏览器刷新？

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

---

有其他方法吗？

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

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

    platformBrowserDynamic().bootstrapModule(AppModule)
        .then(() => console.log('page loaded'))
        .catch(err => console.error(err));

您可以使用模拟来记录应用程序被重新加载的情况；然后在应用程序的初始化例程中检查该日志以执行一些特殊操作

我想检测何时使用路由器刷新页面

将顶级解析程序添加到路由器。如果您有一个顶级路由器，那么它将只被解析一次，子级将处理页面导航。每次解析解析程序都相当于在浏览器中刷新页面

const routes: Routes = [
  {
    path: '',
    component: TopComponent,
    resolve: { loaded: PageLoadedResolver },
    children: [
         ...
    ]
  }
];

在Angular中检测页面加载事件还有许多其他方法

AppModule

的构造函数

@NgModule({...})
export class AppModule {
     public constructor() {
          console.log('page loaded');
     }
}

注入根目录并至少使用一次的服务

@Injector({provideIn: 'root'})
export class MyService {
     public constructor() {
          console.log('page loaded');
     }
}

还有一个引导Angular应用程序的

main.ts

文件

    platformBrowserDynamic().bootstrapModule(AppModule)
        .then(() => console.log('page loaded'))
        .catch(err => console.error(err));

基本上，只要有JavaScript运行一次…

试试这个

  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';

在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';

请参见此处的工作示例

---

单击A页和B页并刷新以查看Angular 7+中最新方式的差异，我们现在可以添加路线导航属性。因此，如果“/somepage”是我们要检测浏览器是否刷新的页面，则在转到此页面时，我们会设置navigate属性prevPage：

this.router.navigate(['/somepage'], { state: { prevPage: this.router.url } });  

然后在页面内：

  ngOnInit(): void {
    const previousUrl = history.state.prevPage ?? null;

    if (!this.previousUrl) {
      console.log('page was refreshed!');
    } else {
      console.log('I came here from: ', previousUrl);
    }
  }

---

注意：如果要从特定页面检测浏览器刷新，则此选项有效。如果你在整个网站上都需要这一点，那么我会采用不同的方法。

我使用这段代码，前两次它对我有效（当用户单击“刷新”按钮时，我能够执行一些代码），但它突然停止工作（我提到的代码不再执行），此后我没有做任何更改。这是怎么发生的？。我使用的是Firefox 71.0，我假设您使用的是来自“rxjs/operators”的

import{filter}

@DeadlyChambers，是的

import{filter}来自“rxjs/operators”这真的有效吗？因为在我的应用程序中，我正在检查
unload
事件，所以我想知道使用角度路由是否做了相同的事情如果您使用会话存储，会话将保持不变，如果您的应用程序正在使用此会话存储，那么它与关闭和启动不同，因为会话存储将在重新加载之间保持不变。它只能手动或在窗口（/tab）关闭时进行清理。很好！StackBlitz使您的解决方案易于理解。很好，但我将作为服务实现，而不是从app.component导入，因为这将在大型应用程序上导致性能问题。这应该如何解决它？router.navigated始终为false。无论您键入新选项卡的url还是刷新它。同样在stackblitz控制台中，它在两种情况下都为真。@char 5我编辑问题。您需要单击页面A或B以查看不刷新的内容，然后如果您刷新或键入url，则url将为refresh=trueThank！我明白，但在这里输入url，即启动新会话和刷新会话是相同的。至少我想知道是否刷新了现有会话。这不是解决这个问题的办法。它可以在大多数浏览器中完成，但我还没有找到一种在Safari中工作的方法