Question

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

每个组件都会根据API调用显示其数据。

我的查询问题是如何等待所有数据加载完毕，然后显示页面，或采用其他方法在每个子组件或仪表板页面中显示微调框。

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

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

我应该为所有16个子组件创建仪表板服务，并为该服务使用State Resolver。

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

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/

仪表板组件HTML渲染

1 个答案: