Как запустить анимацию при перенаправлении на ту же страницу с другим параметром URL, используя Angular в Ioni c 5

Question

Я пытался запустить анимацию, когда страница перенаправлена ​​на себя с другим параметром url.

Например, для post/1 url анимация работает нормально, но если я перенаправлю на post/2 или post/3, анимация не работает.

Я написал анимацию, используя Иони c Анимация и вызывая метод каждый раз, когда изменяется параметр маршрута. Может ли кто-нибудь помочь, пожалуйста?

Вот выдержка из моего кода

HTML

<ion-icon class="custom-icon" name="chevron-back-outline"></ion-icon>

TS

constructor(private animationController: AnimationController) {
  this.route.params.subscribe((val) => {
    this.animateIcon();
  });
}

animateIcon() {
  this.animationController
    .create()
    .addElement(document.querySelector('.custom-icon'))
    .duration(1500)
    .iterations(3)
    .fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
    .fromTo('opacity', '1', '0')
    .play();
}

Answer 1

Я понял это сам. Вместо того, чтобы захватывать имя класса с помощью querySelector, я использовал обозначение ElementRef, чтобы оно работало. Теперь он работает все время, когда я направляюсь на любую из страниц /post.

HTML

<ion-icon #leftIcon class="custom-icon" name="chevron-back-outline"></ion-icon>

TS

@ViewChild('icon1', { read: ElementRef, static: false }) leftIcon: ElementRef;

constructor(private animationController: AnimationController) {
  this.route.params.subscribe((val) => {
    this.animateIcon();
  });
}

animateIcon() {
  this.animationController
    .create()
    .addElement(this.leftIcon.nativeElement)
    .duration(1500)
    .iterations(3)
    .fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
    .fromTo('opacity', '1', '0')
    .play();
}

Answer 2

Попробуйте поместить вызывающую функцию в ionViewWillEnter ()

constructor(private animationController: AnimationController) {

}

ionViewWillEnter(){
 this.route.params.subscribe((val) => {
    this.animateIcon();
  });
}

animateIcon() {
this.animationController
    .create()
    .addElement(document.querySelector('.custom-icon'))
    .duration(1500)
    .iterations(3)
    .fromTo('transform', 'translateX(0px)', 'translateX(-80px)')
    .fromTo('opacity', '1', '0')
    .play();
}