仪表板组件 HTML 呈现

Question

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

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

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

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

所以总的来说，我不知道什么时候所有数据都会出现。

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

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

Answer 1

使用解析器是实现此目的的好方法，下面是一个示例：
使用 contact.resolve.ts 名称创建一个新脚本 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();  
}
}

将 resolve 参数添加到角度布线，如以下代码所示。

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/