ページをロードする前にロードする必要があるデータがいくつかあり、これを実現するためにルート リゾルバーを使用しています。以下は私のコードです。
サービス:
getUsernamesAndBUs(): Observable<any> {
return Observable.forkJoin(
this.http.get('http://localhost:8080/BMSS/getBusinessUnit'),
this.http.get('http://localhost:8080/BMSS/getAllUser'),
this.http.get('http://localhost:8080/BMSS/getCountry'),
this.http.get('http://localhost:8080/BMSS/getCurrency')
);
}
リゾルバ:
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { AgreementDetailsService } from './agreement-details.service';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class UsernamesAndBusResolveService implements Resolve<any> {
constructor(private agreementDetailsService: AgreementDetailsService) { }
resolve(route: ActivatedRouteSnapshot): Observable<any> {
return this.agreementDetailsService.getUsernamesAndBUs();
}
}
ルーティング モジュール:
{
path: 'agreement',
canActivate: [CanActivateAuthGuardService],
children: [
{
path: 'create',
component: AgreementComponent,
resolve: { usernamesAndBUs: UsernamesAndBusResolveService }
}
]
}
ルーティング先のコンポーネント:
this.businessUnits = this.route.snapshot.data['usernamesAndBUs'][0];
this.users = this.route.snapshot.data['usernamesAndBUs'][1];
this.countries = this.route.snapshot.data['usernamesAndBUs'][2];
this.currencies = this.route.snapshot.data['usernamesAndBUs'][3];
インターセプター:
intercept(httpRequest: HttpRequest<any>, httpHandler: HttpHandler): Observable<HttpEvent<any>> {
if (!this.typeAheads.includes(httpRequest.url.split('/').pop())) {
this.bmssLoaderService.start();
} else {
this.bmssLoaderService.stop();
}
return httpHandler.handle(httpRequest).do((httpEvent: HttpEvent<any>) => {
if (httpEvent instanceof HttpResponse) {
this.bmssLoaderService.stop();
}
}, (error: any) => {
this.bmssLoaderService.stop();
});
}
HttpInterceptor
バックエンド サービスが呼び出されたときに表示され、サービスが戻ると消えるスピナー ( を使用) を使用します。バックエンド サービスが戻った後でもコンポーネントの読み込みに時間がかかるため、ユーザーは、スピナーが消えてからターゲット ページにルーティングされるまで、しばらくの間 (約 10 秒) 同じページにとどまります。
この遅延の原因と、どこが間違っているのかわかりません。これで私を助けてください。