Question

我正在尝试使用Angular动画（Angular 7）添加页面动画。它在某些页面上有效，但每次触发动画时都会自动重新加载其他页面。

例如，我从/ data / test-data导航到/ data / execute-model，将首先加载“ execute-model”，并触发ngOnInit，但url更改为“ / data / execute” -模型？”然后页面刷新。我不知道“？”在哪里来自。取出动画后，导航即可正常进行，而无需重新加载页面。

对于有效的页面，它们具有完全相同的配置。我不确定问题出在哪里。

顺便说一句，只有当我使用按钮导航时才会发生这种情况，该按钮（单击）会触发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'];
}

这是动画。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())
    ]
  )
]);

Answer 1

我遇到了完全相同的问题，经过一番尝试后，找到了解决方法。看起来HTML Button标签是麻烦所在。将我的<button>更改为<a>并修改样式，这对我很有效。我不知道是什么原因造成的，如果这是一个Angular错误或其他原因。希望这个答案对某人有帮助！

Answer 2

解决此问题的另一种方法是更改按钮的type属性。

<button type="button"></button>

有关角度的问题 https://github.com/angular/angular/issues/27056

Angular 7页面动画导致页面重新加载

2 个答案: