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

【问题标题】：Angular 7 Page Animation Cause Page ReloadAngular 7 页面动画导致页面重新加载
【发布时间】：2019-06-07 14:52:23
【问题描述】：

我正在尝试使用 Angular Animation (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())
    ]
  )
]);

【问题讨论】：

标签： angular typescript animation angular7

【解决方案1】：

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

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

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

【讨论】：

这很奇怪，但它有效！

【解决方案2】：

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

【讨论】：

非常感谢！我会试试看。