2个组件之间的路由转换而不破坏第一个？

Question

搜索了一整天后，我被困住了，所以我想寻求帮助。

如何在 angular2 中实现这样的功能： http://dfsq.github.io/ngView-animation-effects/app/#/page/1

我的意思是如何使用 Router 在 2 个页面之间无缝转换？ 我可以为页面更改设置动画，但现在是这样的：

animation-in->第一页加载->animation-out->空路由器出口（组件被销毁）->animation-in->第二页加载

但我想要：

动画输入->第一页加载->第一页动画输出->第二页动画输入->第二页加载->这里销毁第一页

任何帮助将不胜感激:)

Answer 1

好的，所以我开始工作了，如果有人感兴趣，这是我的解决方案 - 欢迎任何指向更好的解决方案，因为我是 Angular 世界中的菜鸟 :)

public activate(nextInstruction: ComponentInstruction): Promise<any> {
      let previousInstruction = this.currentInstruction;

      this.currentInstruction = nextInstruction;

      let componentType = nextInstruction.componentType;
      let childRouter = this.parentRouter.childRouter(componentType);

      let providers = ReflectiveInjector.resolve([
          provide(RouteData, {useValue: nextInstruction.routeData}),
          provide(RouteParams, {useValue: new RouteParams(nextInstruction.params)}),
          provide(routerMod.Router, {useValue: childRouter})
      ]);

      this.previousComponentRef = this.currentComponentRef;

      return this.loader.loadNextToLocation(componentType, this.currentElementRef, providers)
          .then((componentRef) => {

              this.currentComponentRef = componentRef;

              Observable.of(true).delay(100).toPromise().then(response => {
                if(this.previousComponentRef){
                  this.previousComponentRef.location.nativeElement.className = 'animateout';
                }
                this.currentComponentRef.location.nativeElement.className = 'animatein';
              });

              if (hasLifecycleHook(hookMod.routerOnActivate, componentType)) {
                  return (<OnActivate>componentRef.instance)
                      .routerOnActivate(nextInstruction, previousInstruction);
              }
          });


}


public routerCanDeactivate(nextInstruction: ComponentInstruction): Promise<boolean> {
    if (isBlank(this.currentInstruction)) {
        return this.resolveToTrue;
    }

    let ref = this.currentComponentRef;

    Observable.of(true).delay(2000).toPromise().then(response => {
        ref.destory();
    });

    return this.resolveToTrue;
}

如你所见，ai 扩展了 router-outlet 并实现了上述两个方法，第一个是向组件添加动画类，第二个是等待组件 dispose 允许动画，这里是示例动画 (dm-page,dm-home,dm -contact 是组件选择器）：

dm-page, dm-home, dm-contact{position: fixed;top:100%; left:0; width: 100%; height: 100%;
 -webkit-transition: top .8s ease-in-out;
-moz-transition: top .8s ease-in-out;
-o-transition: top .8s ease-in-out;
transition: top .8s ease-in-out;}

.animatein {top:0;}
.animateout {top:-100%;}