我正在尝试使用Angular动画（Angular 7）添加页面动画效果。它在一些页面上有效，但是在其他一些页面上每次触发动画时都会自动重新加载。
例如，我从“/data/test-data”导航到“/data/execute-model”，“execute-model”将首先被加载，并且ngOnInit被触发，但是url会更改为“/data/execute-model?”并刷新页面。我不知道这个“？”来自哪里。一旦我删除了动画，导航即可正常工作而无需重新加载页面。
对于那些有效的页面，它们具有完全相同的配置。我不确定问题出在哪里。
顺便说一句，只有当我使用按钮进行导航时才会出现这种情况，点击按钮时触发this.router.navigate(['/data/execute-model']);如果我输入URL，则动画效果可以正常工作且无需重新加载。但这不是我想要的。
非常感谢您的帮助！
这是HTML：
div class="content-area" [@routeAnimations]="prepareRoute(outlet)">
<router-outlet #outlet="outlet"></router-outlet>
</div>
这是组件ts代码：它将stateChangeExpr作为字符串返回，以用于动画触发器。
prepareRoute(outlet: RouterOutlet) {
return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}
这是animation.ts文件：
export const slideInAnimation = trigger('routeAnimations', [
transition(
'*<=>*',
[
style({ position: 'relative' }),
query(':enter, :leave', [
style({
position: 'inherit',
width: '100%'
})
]),
query(':enter', [style({ right: '-100%' })]),
query(':leave', animateChild(), { optional: true }),
group([
query(':leave', [animate('350ms ease-out', style({ right: '100%' }))], { optional: true }),
query(':enter', [animate('350ms ease-out', style({ right: '0%' }))])
]),
query(':enter', animateChild())
]
)
]);