Routeのリゾルバの前後にAngular 2にイベントのようなものがありました

Question

Routeを変更してResolverでデータをロードしたい場合、解決が完了してComponentを表示するまでローディングコンポーネントを表示できますか？それは前解決のようなものを持っていますか？

Answer 1

は

（それをGoogleと最初にそれについて読んそれについての詳細を知るために）観測の力を使ってロードコンポーネント

import {Component, ElementRef, OnInit, OnDestroy} from '@angular/core'; 
import {CORE_DIRECTIVES} from '@angular/common'; 
import { LoadingService } from "./loadindicator.service"; 
import { StatsOverviewPage} from "./page.component"; 

@Component({ 
    selector: 'loading-indicator', 
    directives: [CORE_DIRECTIVES], 
    template: ` 
     <div [style.visibility]="isLoading ? 'visible': 'hidden'" class="loading-indicator-container">   
      <img src="/images/loading.gif" /> 
     </div> 
     `, 
}) 
export class LoadingIndicator implements OnInit, OnDestroy { 
    private isLoading = false; 
    private subscription: any; 

    //we probably want a reference to ElementRef here to do some DOM manipulations 
    constructor(public el: ElementRef, public loadingService: LoadingService) { } 

    showOrHideLoadingIndicator(loading) { 
     this.isLoading = loading; 
     if (this.isLoading) this.playLoadingAnimation(); 
     //else cancel the animation? 
    } 

    playLoadingAnimation() { 
     //this will be your implementation to start the loading animation 
    } 

    ngOnInit() { 
     this.subscription = this.loadingService.loading$.subscribe(loading => { this.showOrHideLoadingIndicator(loading) }); 
    } 

    ngOnDestroy() { 
     this.subscription.unsubscribe(); 
    } 
} 

を作成します。そして、使用されるサービスを作成上記部品を搭載するための他の部品である。

import { Injectable } from '@angular/core'; 


import {Observable} from "rxjs/Observable"; 
import {Observer} from "rxjs/Observer"; 
import 'rxjs/add/operator/share'; 

/** 
* Singleton service, injected at app level 
*/ 
export class LoadingService { 
    loading$: Observable<String>; 
    private _observer: Observer<String>; 

    constructor() { 
     this.loading$ = new Observable<String>(
      observer => this._observer = observer); 
    } 

    toggleLoadingIndicator(name) { 
     if (this._observer) { 
      this._observer.next(name); 
     } 
    } 
} 

今まであなただけtrueを渡すと、あなたの行動が完了したときだけ、いくつかの実際のコードを表示同じ機能

import {Component, ElementRef, OnInit, OnDestroy} from '@angular/core'; 
//import {StatsService} from "../../services/stats-service"; 
import {LoadingIndicator} from "./loading.component"; 
import { LoadingService } from "./loadindicator.service"; 


@Component({ 
    templateUrl: "/app/LoadingIndicator/loading.html", 
    directives: [LoadingIndicator] 
}) 
export class StatsOverviewPage { 
    isShow: boolean = false; 
    private stats: Array<any> = []; 

    constructor(private loadingService: LoadingService) { } 

    onPageLoaded(): void { 
     //this.isShow = !isShow 
     this.loadingService.toggleLoadingIndicator(true); 

     //this.loadingService.toggleLoadingIndicator(this.isShow); 
     //setTimeout(2000); 
     this.getDataSlowly().then(response => { 

      this.loadingService.toggleLoadingIndicator(false); 
     }); 

    } 
    getDataSlowly() { 

     return new Promise<boolean>(resolve => setTimeout(() => resolve(true), 2000)); 
     // 2 seconds 
    } 
}