Question

目前在我的NG2应用程序中我正在使用解析器，它与信号器连接。
我在路径配置中配置了解析器，因此在导航到目标页面时，会相应地调用resolve函数。

我已设法在初始化目标页面时显示动画。

但是，我希望在解析我的解析器时显示一个' is-busy '，就像动画一样，但我不知道如何做到这一点。有什么建议吗？

这是我目前的设置：

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

您可以在根应用程序组件中加载一个加载组件，然后监听导航事件。构建导航拦截器使导航开始时加载组件处于活动状态，导航结束时停止活动。

看一下这个解决方案，它可能就是你想要的： Show loading screen when navigating between routes in Angular 2

Answer 2

你可以抓住路由器事件！你有例如： NavigationStart NavigationEnd。

导航时，NavigationStart会先发送，然后调用“解析” 承诺，当决心结束。 NavigationEnd将发送，您的“离开”动画将开始。

首先你应该在组件构造函数中注入“Router”：

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

接下来你应该调用事件Observable，你应该filter个事件，确保你在'home'状态之外导航并且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  

      }
   }

祝你好运！

Angular 2 - 路由器：如何在路由解析期间为页面转换设置动画

2 个答案: