仪表板组件 HTML 渲染答案

【问题标题】：Dashboard Component HTML Rendering仪表板组件 HTML 渲染
【发布时间】：2019-01-30 12:33:12
【问题描述】：

我在单个页面上有包含 16 个子组件的仪表板组件。

这些组件中的每一个都将根据 API 调用显示其数据。

我的问题是如何等待所有数据被加载，然后显示页面或按照替代方法在每个子组件或仪表板页面中显示微调器。

某些组件将包含来自 Twitter 和 Facebook 源的数据。

所以总的来说，我不知道所有数据何时会出现。

我是否应该为所有 16 个子组件创建仪表板服务并为服务使用状态解析器。

请提出一些我可以实施的想法。

【问题讨论】：

最好的解决方案是实现增量方法，这意味着只需从每个组件 onInit 触发 API，然后为每个组件放置微调器，这样用户就不必等待所有组件及其数据加载等待。

标签： angular angular-ui-router angular-services

【解决方案1】：

使用 Resolver 是实现此目的的好方法，这里有一个示例：
新建一个脚本ts，名字为contact.resolve.ts，填写如下代码：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot,RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Rx';
import { ContactService } from './contact.service';
import { Subscription } from 'rxjs/Subscription';

@Injectable()
export class ContactResolve implements Resolve<any> {
 constructor(private  dataservice: ContactService){}
 resolve(route:ActivatedRouteSnapshot, 
        state:RouterStateSnapshot,
       ): Observable<any> {
    return this.dataservice.getContacts();  
  }
}

将解析参数添加到角度路由中，如下面的代码。

import { Routes } from '@angular/router';
import { ContactListComponent } from './contact-list/contact-list.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { ContactDetailComponent } from './contact-detail/contact-detail.component';
import { ContactResolve } from './contact.resolve';
import { DetailResolve } from './detail.resolve';

export const AppRoutes: Routes = [
  { path: 'contact', 
    component: ContactListComponent,
    resolve: {
      contact: ContactResolve,
    }},
  { path: '', component: DashboardComponent },
  { 
    path: 'contact-detail',
    component: ContactDetailComponent,
    resolve: {
      detail: DetailResolve,
    }
  }
];

来源：https://seegatesite.com/how-to-load-all-data-before-rendering-view-component-in-angular-4/

【讨论】：