相关疑难解决方法(0)

在Angular 1.x中,我们可以使用ngAnimate来检测我们何时离开或进入特定路线.此外,我们可以对他们应用行为:

animateApp.animation('.myElement', function(){

    return {

        enter : function(element, done) {
            //Do something on enter
        },

        leave : function(element, done) {
            //Do something on leave
        }
    };

)};

得到这样的产品:http://embed.plnkr.co/uW4v9T/preview

我想用Angular 2.0做类似的事情,我觉得我很接近......

所以这里去,我创建了一个用于控制与导航的主要应用组件一个简单的路由器家用和有关部件.

import { bootstrap, bind, Component, provide, View } from 'angular2/angular2';
import {RouteConfig, RouteParams, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, APP_BASE_HREF, ROUTER_BINDINGS} from 'angular2/router'




/////////////////////////////////////////////////////////////////
// Home Component Start
/////////////////////////////////////////////////////////////////
@Component({
  selector: 'home-cmp'
})

@View({
  template: `
    <h2 class="title">Home Page</h2>
  `
})

class HomeCmp implements OnActivate, …

在官方文档的帮助下使用Angular 2 Animate(RC2),以及Matias在YT频道上使用的月份ng-conf动画视频中使用的代码.

除了最重要的部分,我得到了一切工作:

在更改routerlinks/components时,我似乎无法获得离开转换/动画.使用'*=> void'不会做任何事情.路由器在视图中销毁组件而不考虑动态离开转换并引入新的routerlink /组件.

我让进入的动画工作,但不是离开的动画.

我认为路由器不会自动检测到组件的离开动画(类似于ng-leave ng-leave-active),因此我错过了一个步骤,这不是一个优秀的黑客.

所有的plunker示例,官方示例和ng-conf Matias one示例都显示了它们,没有任何路由器交互:所有进入/离开状态和转换示例都在同一个组件中.

** Edit::: [Plunker Demo Here] http://plnkr.co/edit/IJoaB7ifVPJqX0NrUIpV

您会注意到,即使指定了过渡'*=> void',路由器链接的更改也会完全忽略它

ng2动画基本上没有帖子,所以这是唯一的方法.

感谢您抽出宝贵时间阅读本文.感谢帮助.