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

Question

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

例如，对于post/1url，动画可以正常工作，但如果我路由到post/2或post/3，则动画不工作。

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

这是我的代码的摘录

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

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

Answer 2

我自己想好了。我没有使用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();
}