각도 2 - 사전로드 중로드 진행 애니메이션 실행 중

Question

라우팅 파일 에 app을 구성하여 app-routing.module.ts 첫 페이지로드시 모든 모듈을로드했습니다. 조금 뒤떨어지기 때문에 마지막 모듈이로드 될 때까지로드 애니메이션을 표시하고 싶습니다. 이것이 가능한가?

앱 routing.component.ts : 우리는 allready 재 라우팅을위한 GIF 애니메이션을 구현 한

@NgModule({ 
    imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], 
    exports: [RouterModule] 
}) 

.

는 app.component.ts : 나 자신에 의해 방법을 알아 냈어요

router.events.subscribe((routerEvent: Event) => { 
    this.checkRouterEvent(routerEvent); 
}); 
.... 

checkRouterEvent(routerEvent: Event): void { 
    if (routerEvent instanceof NavigationStart) { 
     this.loading = true; 
    } 

    // this.loading is just a boolean to show <div> with animation inside or not. 
    if (routerEvent instanceof NavigationCancel || 
     routerEvent instanceof NavigationEnd || 
     routerEvent instanceof NavigationError) { 
     this.loading = false; 
    } 
} 

Answer 1

. 나는 그것이 적절한 방법인지는 모르지만 그것은 나를 위해 작동합니다. 그냥 RouteConfigLoadStart 및 RouteConfigLoadEnd 이벤트를 확인하고 있습니다.

private numberOfLoadingModules: number = 0; 
private numberOfLoadedModules: number = 0; 

checkRouterEvent(routerEvent: Event): void { 
    // Used for site init. For each module which will be loaded this event is fired 
    if (routerEvent instanceof RouteConfigLoadStart) { 
     this.loading = true; 
     this.numberOfLoadingModules += 1; 
    } 

    // Used for site init. For each module which has been loaded this event is fired 
    if (routerEvent instanceof RouteConfigLoadEnd) { 
     this.numberOfLoadedModules += 1; 
    } 

    // Check if all modules are completly loaded. Needed because of lagging if preloadStrategy is used (in app-routing). 
    if (this.numberOfLoadedModules == this.numberOfLoadingModules) { 
     this.loading = false; 
    } 

    if (routerEvent instanceof NavigationStart) { 
     this.loading = true; 
    } 

    if (routerEvent instanceof NavigationCancel || 
     routerEvent instanceof NavigationEnd || 
     routerEvent instanceof NavigationError) { 
     this.loading = false; 
    } 
}