Javascript 在后台从API加载数据

我目前正在努力改进我的用户体验。 当用户切换到一个新组件时，大约需要0.5到1秒，直到他们的数据被加载并显示在视图中。因此，在最初的时刻，视图是空的，某些部分丢失或显示错误

我知道存在角度解析接口。然而，据我所知，这只是延迟视图的渲染，直到数据可用为止

我想知道是否有一个选项，在我的应用程序的登录页呈现后，您可以在后台加载数据。这样，用户就可以在后台使用和查看应用程序，而不会注意到其他页面/组件的数据正在加载

或者可能有更好的方法，或者我对resolve接口的理解是错误的

编辑： 提供一个示例，说明我的代码当前的工作方式： 在服务文件中：

getTiers () {
      return this.http.get(this.authService.getApiEndpoint(), this.authService.getRequestOptions())
      .map(
        (response: Response) => {
          const data = response.json();
          return data;
        }
      );

在我的组件文件中： 恩戈尼尼特（）{ 这个。getTiers（）

}

在我的模板文件中：

    <div class="col-md-4" *ngFor="let tier of tiers">
        <ul class="table">
          <li class="title">
            {{ tier.title }}
          </li>
[...]

{{tier.title}}

[...]

异步加载数据是使用Angular的好处之一。因为它是一个单页应用程序，在加载登录页时，如果您适当地使用异步方法，将有助于解决此问题。看看这篇文章

---

祝你好运

使用应用程序中所有可用的服务加载数据并将其存储在rxjs BehaviorSubject中

public data$: BehaviorSubject<any> = new BehaviorSubject(null);

constructor(private http: Http){
  this.http.get(...).map(...).subscribe(res => this.data$.next(res))
}

---

注意：如果需要重置行为主题

data$.next（null）

的值，可以使用服务在后台加载所需的数据。使用AJAX。加载数据后，更新角度分量。改进它。。。来自什么？给出一个演示您当前方法的示例，否则很难提出更好的建议。我正在使用服务加载数据，但是使用.subscribe的最终调用发生在我的组件中。或者你是在说一些不同的东西@Ploppy AJAX是如何工作的？如果您订阅了组件，那么您就没有在服务中加载数据。您应该订阅服务中的http.get（），并将数据存储在rxjs BehaviorSubject中。最后，组件应该订阅BehaviorSubject对象。这样，您的数据将加载到服务中，并在卸载组件时保持不变；我们发现用户在切换时感到困惑，并且在一秒钟内仍然看到以前的数据。据我所知，这似乎是一些静态数据。数据不是静态的，但是只有用户可以更改数据，所以每当发生更改时，我都会重新加载数据。应该没有问题吧？感谢@plopyyeah，如果您不想看到上面@jornsharpe解释的令人困惑的事情，您甚至可以通过执行

data$.next（null）

来重置BehaviorSubject的值。如果答案适合你，请接受。解决方案不起作用。在数据可用之前仍有延迟。有没有办法将此讨论转移到私人聊天@扑通

public data$: BehaviorSubject<any> = new BehaviorSubject(null);

constructor(private http: Http){
  this.http.get(...).map(...).subscribe(res => this.data$.next(res))
}

public data: any;

constructor(private myService: MyService){
  this.data = this.myService.data$.value;
  this.myService.data$.subscribe(res => this.data = res);
}