如何在 Ionic 5 中使用 Angular 路由到具有不同 URL 参数的同一页面时触发动画答案

【问题标题】：How to trigger animation when routed to the same page with different URL parameter using Angular in Ionic 5如何在 Ionic 5 中使用 Angular 路由到具有不同 URL 参数的同一页面时触发动画
【发布时间】：2020-05-05 04:56:05
【问题描述】：

当页面使用不同的 url 参数路由到自身时，我试图触发动画。

例如，对于post/1 url，动画效果很好，但如果我路由到post/2 或post/3，动画就不起作用。

我使用Ionic Animation 编写动画，并在每次路由参数更改时调用该方法。有人可以帮忙吗？

这是我的代码的摘录

HTML

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

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();
}

【问题讨论】：

标签： angular ionic-framework ionic5

【解决方案1】：

尝试把调用函数放到 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();
}

【讨论】：

【解决方案2】：

我自己想通了。我没有使用querySelector 捕获类名，而是使用ElementRef 表示法使其工作。现在，当我路由到任何/post 页面时，它一直有效。

HTML

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

@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();
}

【讨论】：