javascript - 當從頂部欄元件呼叫時，Angular 路由動畫無法運作（錯誤：NG03402）

我正在嘗試按照 Angular 動畫指南（https://angular.io/guide/animations）在我的組件之間實現簡單的動畫過渡。這是我用於在組件之間切換的動畫：

動畫.ts

export const slideInAnimation =
 trigger('routeAnimations', [
    transition('* <=> DetailsPage', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], { optional: false }),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%' }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ]),
      ]),
    ]),
    transition('* <=> *', [
      style({ position: 'relative' }),
      query(':enter, :leave', [
        style({
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%'
        })
      ], { optional: false }),
      query(':enter', [
        style({ left: '-100%' })
      ]),
      query(':leave', animateChild()),
      group([
        query(':leave', [
          animate('200ms ease-out', style({ left: '100%', opacity: 0 }))
        ]),
        query(':enter', [
          animate('300ms ease-out', style({ left: '0%' }))
        ]),
        query('@*', animateChild())
      ]),
    ])
  ]);

從未指定的組件切換到 'DetailsPage' 組件的第一次轉換有效，但從未指定的組件切換到另一個組件的第二次轉換無效。雖然到 'DetailsPage' 的路由是通過正在轉換的組件本身進行的，但其他組件之間的路由是通過頂部欄組件進行的。我懷疑問題可能就在這裡。

movie.html

<a [title]="movie.name + ' details'" [routerLink]="['/media', movie.type, movie.id]" >

top-bar.html

        <div class="navbar-nav">
          <a class="nav-item nav-link-active" [routerLink]="['movie']" id="movie_link_button"
             routerLinkActive="active-link" href="#" >Movie</a>
          <a class="nav-item nav-link-active" [routerLink]="['game']" id="game_link_button"
             routerLinkActive="active-link" href="#" >Game</a>
          <a class="nav-item nav-link-active" [routerLink]="['show']" id="show_link_button"
             routerLinkActive="active-link" href="#" >Show</a>
        </div>

當我嘗試在除錯模式下觸發動畫時，我多次收到以下錯誤：

Error: NG03402: Unable to process animations due to the following failed trigger transitions NG03505: @routeAnimations has failed due to: NG03014: `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.

當我加入 { optional: true } 時，錯誤訊息消失了，但動畫顯然仍然無法運作。