Angular 2 - router：ルート解決中にページ遷移をアニメートする方法

Question

現在、私のNG2アプリ内にはリゾルバが使用されており、これはsignalrに接続します。
私はルートの設定の中でリゾルバを設定しました。そのため、宛先ページへのナビゲーションに応じて解決関数が呼び出されます。

宛先ページの初期化時にアニメーションを表示することができました。

ただし、私のリゾルバの解決中にアニメーションのように 'is-busy is-busy 012'を表示したいと思いますが、これを行う方法はわかりません。助言がありますか？

は、これが私の現在の設定です：

//resolver.ts 
@Injectable() 
export class ConnectionResolver implements Resolve<SignalRConnectionMock> { 

constructor(private _signalR: SignalR) {} 

    resolve() { 
     console.log('HomeRouteResolver. Resolving...'); 
     return new SignalRConnectionMock();// this._signalR.connect(); 
    } 
} 

//inside route.ts 
{ path: 'docs', 
    component: DocumentationComponent, 
    resolve: { connection: ConnectionResolver } 
} 

//router.ts 
import { trigger, state, animate, style, transition } from '@angular/core'; 

//router.transition.ts 
export function routerTransition() { 
    return slideToLeft(); 
} 

function slideToLeft() { 
    return trigger('routerTransition', [ 
    state('void', style({position: 'fixed', width: '100%'})), 
    state('*', style({position: 'fixed', width: '100%'})), 
    transition(':enter', [ // before 2.1: transition('void => *', [ 
     style({transform: 'translateX(100%)'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(0%)'})) 
    ]), 
    transition(':leave', [ // before 2.1: transition('* => void', [ 
     style({transform: 'translateX(0%)'}), 
     animate('0.5s ease-in-out', style({transform: 'translateX(-100%)'})) 
    ]) 
]); 
} 

//home.component.ts 
import { routerTransition } from './route.transition'; 

@Component({ 
    selector: 'home',   
    animations: [routerTransition()], 
    host: {'[@routerTransition]': ''} 
}) 
export class HomeComponent {} 

Answer 1

あなたは、ルータのイベントをキャッチすることができます！ 例： NavigationStart NavigationEnd。

ナビゲートするとNavigationStartが最初に送信し、次にそのコールには「解決」 約束が送信され、解決が完了したときに送信されます。 NavigationEndが送信され、あなたの「休暇」アニメーションが開始されます。

最初は、コンポーネントのコンストラクタ内の「ルータ」を注入する必要があります

import {Router} from "@angular/router"; 
constructor(private router:Router){} 

をあなたが観測イベントを呼び出す必要があります次に、あなたはfilterイベントは、あなたがそれを実現だことを確認します「ホーム」状態の外を移動し、takeにする必要があります一度だけ：

import {NavigationEnd, NavigationStart} from "@angular/router"; 
    import 'rxjs/add/operator/take'; 
    import 'rxjs/add/operator/filter'; 

    constructor(private router:Router){ 
    router.events.filter(e => e instanceof NavigationStart && !router.isActive("home", false)).take(1).subscribe(() => { 
     // resolve has been call here! "is-busy"   
     } 

    router.events.filter(e => e instanceof NavigationEnd && !router.isActive("home", false)).take(1).subscribe(() => { 
     // resolve finished here! end of "is-busy" start of "leave" animation 

     } 
    } 

幸運！

Answer 2

あなたのルートアプリケーションのコンポーネントでのロードコンポーネントを持っているし、ナビゲーションイベントをリッスンすることができます。ナビゲーション開始時にナビゲーションインターセプターをアクティブにし、ナビゲーション終了時に非アクティブにするナビゲーションインターセプターを構築します。

は、このソリューションを見てみましょう、それはあなたが望むものはおそらくです： Show loading screen when navigating between routes in Angular 2