Пример анимации Angular 2 завершил функцию обратного вызова

Я пытаюсь создать функцию, которая будет запускаться в конце анимации в Angular 2 (я использую последнюю версию angular cli).

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

//first.component.ts

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/core';


@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css'],
  host: {
    '[@routeAnimation]': 'true',
    '[style.display]': "'block'",
    '[style.position]': "'absolute'"
  },
  animations: [
    trigger('routeAnimation', [
      state('*', style({transform: 'translateX(0)', opacity: 1})),
      transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
      transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ]
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

  myFunc() {
  // call this function at the end of the animation.
 }

}

HTML это просто div

<div class="w9914420">
  <h2>
     first-component Works!
  </h2>
</div> 

Честно говоря, я не слишком знаком с JavaScript, поэтому любая помощь или быстрый пример помогут мне лучше понять Angular 2.

Ответы на вопрос(2)

Ваш ответ на вопрос