Question

我将金融交易加载到MySQL数据库中，并使用PHP Restful API和angular 5前端生成报告。使用下拉菜单，用户可以选择开始日期和结束日期，并运行不同时期的报告。我创建了一个服务“ DateService”，该服务以两个初始值（thismo和lastmo）开头，并将它们分配给日期变量（datev和datevb）。

private datevSource = new BehaviorSubject <string> (this.thismo);
datev = this.datevSource.asObservable();
private datevbSource = new BehaviorSubject <string> (this.lastmo);
datevb = this.datevbSource.asObservable();

datev（结束日期）和datevb（开始日期）用于查询数据库以生成报告。用户可以随意更改这些日期，并且这些值在DateService中维护。如果他们导航到其他报告，则最后选择的值将保留在DateService中。他们还可以将这些值重置为默认值（thismo＆lastmo）。

setDates(datevar, datevarb) {
    this.datev = datevar;
    this.datevb = datevarb;
    }
reDate() {
   this.datevSource.next(this.thismo);
   this.datevbSource.next(this.lastmo);
   }

用户生成报告时，Thismo和lastmo不变。这些值目前是硬编码的，并且每当数据库更新时（通常每月一次），我都会在服务中更改它们并重建/上传应用程序。似乎我不应该只是为了更改这两个变量而重建应用程序。

我在数据库中创建了一个包含这些值的新表，并希望在用户访问该应用程序时一次单击API来存储thismo和lastmo。如何更改我的datevSource以检查是否已从API加载了thismo，如果尚未加载，则像往常一样传递值？我尝试创建一个新变量（firstrun = 0）并在运行一个函数（loadGlobals）时递增它，但是查询数据库的其他函数在loadGlobals完成之前运行。

我每次都可以从数据库中欺骗并加载thismo，但是我试图避免每次有人导航到新页面时都点击API。

任何建议或指示，将不胜感激。

Answer 1

听起来您有两个不经常更改的值。

您想从API中获取它们，但又不想每次都调用它。

这是一个简单的缓存问题。

在Angular应用中有多种处理缓存的方法。您可以将来自API的响应缓存在服务中。如果该服务已经获得API响应，则返回先前获取的值。像这样：

@Injectable()
export class ThismoService {

  constructor(private http: HttpClient) {}

  private thismo 

  public getThismo(): Observable<any> {
    if (this.thismo == null) {
      return this.http.get('/thismo').pipe(
        map(response => response.thismo),
        tap(thismo => this.thismo = thismo)
      )
    } else {
      return of(this.thismo)
    }   
  }
}

一种更专业的方法是使用基于全局Redux的商店解决方案，例如ngrx。该存储可随时随地访问，非常适合缓存。您可以引入逻辑来缓存1天，然后每天从API提取一次。如果您要使用ngrx，那么很好的RxJs技能将非常有用。

可悲的是，ngrx教程通常都是垃圾-如果您负担得起，这是Udemy上很棒的ngrx课程-https://www.udemy.com/ngrx-course/learn/v4/content

Angular 5：数据服务，加载初始值

1 个答案: