Angular 7 頁面動畫導致頁面重新加載

Question

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

Answer 1

我遇到了完全相同的問題，經過一些嘗試，找到了解決方法。 看起來 HTML Button 標簽是那里的麻煩。 將我的<button>更改為<a>並調整樣式，它對我有用。 我不知道是什么原因造成的，如果這是一個 Angular 錯誤或其他什么。 希望這個答案對某人有所幫助！

Answer 2

解決此問題的另一種方法是更改​​按鈕的類型屬性。

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

與角度相關的問題https://github.com/angular/angular/issues/27056