Question

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

我知道有角度解析界面。但据我了解，它只是在数据可用之前延迟了视图的渲染。

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

或者甚至可能有更好的方法，或者我对解析界面的理解是错误的。

修改举个例子，我的代码目前是如何工作的：在服务文件中：

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

在我的组件文件中： ngOnInit（）{ this.getTiers（）;

}

  getTiers () {
    this.tierService.getTiers()
      .subscribe(
        (tiers) =>
          this.tiers = tiers.data,
        (error) => console.log(error),
        () => this.initializingCompleted = true
      );
  }

在我的模板文件中：

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

Answer 1

使用整个应用程序可用的服务加载数据并将其存储在rxjs 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);
}

注意：如果您需要重置行为主题data$.next(null)

的值

Answer 2

异步加载数据是使用Angular的好处之一。因为它是单页面应用程序，所以在加载着陆页时，如果您正确使用异步方法，将有助于您解决此问题。看一下这篇文章https://scotch.io/tutorials/3-ways-to-pass-async-data-to-angular-2-child-components

祝你好运

在后台从API加载数据

2 个答案: