В 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, onDeactivate{

  onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
    console.log("Home Page - initialized");
  }

  onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
    console.log("Home Page - destroyed");
  }

}
/////////////////////////////////////////////////////////////////
// Home Component End
/////////////////////////////////////////////////////////////////




/////////////////////////////////////////////////////////////////
// About Component Start
/////////////////////////////////////////////////////////////////
@Component({
  selector: 'about-cmp'
})

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

class AboutCmp implements OnActivate, onDeactivate {

  onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
    console.log("About Page - initialized");
  }

  onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
    console.log("About Page - destroyed");
  }

}
/////////////////////////////////////////////////////////////////
// About Component End
/////////////////////////////////////////////////////////////////




/////////////////////////////////////////////////////////////////
// Main Application Componenent Start
/////////////////////////////////////////////////////////////////
@Component({
  selector: 'my-app'
})

@View({
  template: `
    <div>
      <h1>Hello {{message}}!</h1>
      <a [router-link]="['./HomeCmp']">home</a>
      <a [router-link]="['./AboutCmp']">about</a>
      <hr>
      <router-outlet></router-outlet>
    </div>
  `,
  directives: [ROUTER_DIRECTIVES]
})

@RouteConfig([
  {path: '/', component: HomeCmp, as: 'HomeCmp'},
  {path: '/about', component: AboutCmp, as: 'AboutCmp'}
])

export class App {
}
/////////////////////////////////////////////////////////////////
// Main Application Componenent End
/////////////////////////////////////////////////////////////////




bootstrap(App, [
  ROUTER_BINDINGS,
  ROUTER_PROVIDERS,
  ROUTER_DIRECTIVES,
  provide(APP_BASE_HREF, {useValue: '/'})
])

В настоящий момент я могу зафиксировать, когда маршрутизатор создал или уничтожил конкретный компонент, когда он перемещается от одного к другому. Это здорово, но когдапредыдущий компонентразрушенный Я не могу применитьв отпуске анимация перехода до инициализации следующего компонента.

class HomeCmp implements OnActivate, onDeactivate{

    onActivate(next: ComponentInstruction, prev: ComponentInstruction) {
        //This works
        TweenMax.fromTo($(".title"), 1, {opacity: 0}, {opacity: 1});
    }

    onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {
        //This get ignored
        TweenMax.fromTo($(".title"), 1, {opacity: 0}, {opacity: 1});
    }

}

Кажется, что есть решение этой проблемы с помощью обещаний. Предварительный просмотр API Angular.io они заявляют:

Если onDeactivate возвращает обещание, изменение маршрута будет ждать, пока обещание не будет выполнено.

а также

Если onActivate возвращает обещание, изменение маршрута будет ждать, пока не будет выполнено обещание, чтобы создать экземпляр и активировать дочерние компоненты.

https://angular.io/docs/ts/latest/api/

Я совершенно новичок в обещаниях, поэтому я собрал все это в своем коде, который решил проблему уничтожения моего текущего компонента при инициализации следующего, но потомникогда разрушается, он только создает новый экземпляр этого. Каждый раз, когда я возвращаюсь к нему, он создает новый экземпляр, что приводит к нескольким копиям.

onDeactivate(next: ComponentInstruction, prev: ComponentInstruction) {

    function ani(){
      TweenMax.fromTo($(".title"), 1, {opacity: 1}, {opacity: 0});
    }

    var aniPromise = ani();

    aniPromise.then(function (ani) {
        ani();
    });

}

Напомним, что маршрутизатор должен быть в состоянии ждать завершения текущего компонента.бизнес перед его уничтожением и инициализацией следующего компонента.

Я надеюсь, что все имеет смысл, и я действительно ценю помощь!