javascript - การเคลื่อนไหวของเส้นทาง Angular ไม่ทำงานเมื่อเรียกจากคอมโพเนนต์ท็อปบาร์ (ข้อผิดพลาด: NG03402)

ฉันกำลังพยายามที่จะนำการเปลี่ยนแอนิเมชันง่าย ๆ ไปใช้ระหว่างคอมโพเนนต์ของฉันตามคู่มือแอนิเมชันของ Angular (https://angular.io/guide/animations) นี่คือแอนิเมชันของฉันสำหรับการสลับระหว่างคอมโพเนนต์:

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' เกิดขึ้นผ่านคอมโพเนนต์ที่กำลังเปลี่ยนแปลงเอง การนำทางระหว่างคอมโพเนนต์อื่นเกิดขึ้นผ่านคอมโพเนนต์แถบบน ฉันสงสัยว่านี่อาจเป็นจุดที่มีปัญหา

ภาพยนตร์.html

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

แถบท็อป.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 } ข้อความแสดงข้อผิดพลาดหายไป แต่อนิเมชันก็ยังไม่ทำงานอย่างชัดเจน