Angular Ngrx 商店和 APP_Initialiser

Question

嗨，我真的正在努力解决一个问题。

我们目前正在使用 nrgx Store 来存储有关客户端应用程序信息的客户端数据。这效果很好。

但是我们发现，当用户离开网站然后返回网站时，它会记住以前的数据。

因此，我尝试使用 APP_INITALIZER 重置应用程序启动时的存储信息。

我的问题是初始化器是异步的，因此我对重置 ngrx 存储的调用正在开始，但在应用程序完全初始化之前尚未完成。

这是我所拥有的：

import { Injectable } from '@angular/core';
import { Store } from '@ngxs/store';
import { environment } from 'src/environments/environment';
import { ResetApplicationStateModel } from 'src/app/modules/state/application-state.actions';

@Injectable({ providedIn: 'root' })
export class AppStateInitializerService {

isDevelopment = !environment.production;

constructor(private store: Store) {}

async initialize(): Promise<void> {
let loggingPrefix = 'app-state-initialiser.service::initializeApp - ';

return new Promise<void>((resolve, reject) => {
  if (this.isDevelopment) {
      console.log(loggingPrefix + 'start of method');
  }

  //do your initialisation stuff here  
  try {  
      // Wait for the action to complete
      if (this.isDevelopment) {
        console.log(loggingPrefix + 'before ResetApplicationStateModel');
      }
      
      this.store.dispatch(new ResetApplicationStateModel());
      if (this.isDevelopment) {
        console.log(loggingPrefix + 'after ResetApplicationStateModel');
      }
      
      if (this.isDevelopment) {
        console.log(loggingPrefix + 'end of method');
      } 
  } catch (error) {
    console.error(loggingPrefix + 'Action failed:', error);
  }

  // Set the wait loop 
  setTimeout(() => {
    if (this.isDevelopment) {
      console.log(loggingPrefix + 'end of method');
  }
      resolve();
  }, 1000);
});
}
}

在app.module.ts中

export function initializerStateService(myInitializerService: 
AppStateInitializerService) {
return (): Promise<any> => { 
  return myInitializerService.initialize();
}
}

有人可以帮忙吗？

Answer 1

单页应用程序通常不能很好地使用后退按钮，因为之前的状态已加载，有时页面根本无法工作。建议以下修复来解决问题。

---

在根组件中

app.component.ts

放置此主机监听器。我们可以采取两种方法来解决这个问题。

我们可以重新加载整个页面以防止状态被存储。刷新时状态将重置为初始值。 （更喜欢这种方法，因为它更容易维护并防止用户经常使用后退按钮）。

import { HostListener } from '@angular/core';

@HostListener('window:popstate', ['$event'])
onPopState(event) {
  location.reload()
}

如果您不喜欢重新加载的概念，您可以编写一个重置服务属性的方法，以便它们恢复到初始状态。

import { HostListener } from '@angular/core';

@HostListener('window:popstate', ['$event'])
onPopState(event) {
  location.reload()
}

---

然后在服务中您可以编写重置这些变量的方法。

import { HostListener } from '@angular/core';

@HostListener('window:popstate', ['$event'])
onPopState(event) {
  this.ngrxService.reset();
}

服务：

@Injectable({ ... })
export class ngrxService {
  reset() {
    // reset the state properties to the initial values.
  }
}