Angular 2-路由器:如何在路由解析期间为页面过渡设置动画 [英] Angular 2 - router: How to animate page transition during route resolve

问题描述

当前在我的NG2应用程序中，我正在使用解析器，该连接器与Signalr建立了连接.
我已经在 route 配置中配置了解析器，因此当导航到目标页面时，将相应地调用resolve函数.

Currently inside my NG2 app I'm using a resolver, that makes a connection to signalr.
I have configured the resolver inside my route config, so when navigation to the destination page, the resolve function is called accordingly.

目标页面初始化后，我设法显示了动画.

I've managed to show an animation when the destination page is initialized.

但是，我想在解析器的解析过程中显示类似于动画的"忙碌"，但我不知道该怎么做.有什么建议吗?

However, I would like to show an 'is-busy' like animation DURING the resolving of my resolver, but I don't know how to do this. Any suggestions?

这是我当前的设置:

//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 {}

推荐答案

您可以捕获路由器事件！ 例如，您有: NavigationStart NavigationEnd.

You can catch the router events! you have for example: NavigationStart NavigationEnd.

当您导航时，NavigationStart将首先发送，然后将其称为解决" 承诺以及解决方案的完成时间. NavigationEnd将随一起发送，并且您的离开"动画将开始.

when you navigate, NavigationStart will send first, then its call the "resolve" promise and when the resolve finished. NavigationEnd will send with and your "leave" animation will start.

首先，您应该在组件构造函数中注入"Router":

first you should inject "Router" inside component constructor:

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

接下来，您应将事件称为可观察"事件，应将filter事件称为事件，确保您导航到归属"状态之外，并且take确保仅发生一次:

next you should call events Observable, you should filter events, make sure you navigate outside of 'home' state and take make sure it's happen only once :

  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  

      }
   }

祝你好运！

这篇关于Angular 2-路由器:如何在路由解析期间为页面过渡设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！