Angular顶栏组件触发路由动画失效 报NG03402错误排查

故障根因 #

query(":enter") returned zero elements报错、非详情页路由动画失效，和动画触发的组件位置无关，是三个明确问题导致的：

• 顶栏导航链接同时配置了href="#"和routerLink：href="#"会优先触发原生锚点跳转，直接打断Angular路由的组件卸载、挂载完整流程，路由出口不会生成对应的进入、离开DOM节点，动画查询自然返回空结果。
• 顶栏routerLink使用了无前置斜杠的相对路径：跳转详情页的链接用的是根绝对路径['/media', ...]（路径开头带/），可以正常匹配路由规则；但顶栏写的['movie']/['game']/['show']是相对当前组件路由层级的路径，会拼接出错误的路由地址，导致通配符过渡规则* <=> *无法匹配正确的前后路由状态。
• 路由配置与动画绑定缺失：如果仅给详情页配置了路由动画标记、其他页面未配置，或是路由插座未将当前路由状态传给动画触发器，通配符过渡会因拿不到有效状态直接跳过执行。

分步修复 #

1. 修正顶栏导航代码，删除冗余的href="#"属性，将所有路由路径改为根绝对路径：

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

注意：使用routerLink指令时无需手动添加href属性，Angular会自动生成符合可访问性要求的对应属性，手动写href极易打断路由的正常跳转逻辑。

2. 给所有动画查询语句添加{ optional: true }配置，兼容路由初始化、重定向等无对应进出节点的场景，避免偶发报错：

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

3. 补全路由动画绑定与配置
   • 首先在根组件（通常为app.component.ts）中添加路由状态获取方法：

   import { RouterOutlet } from '@angular/router';
   
   export class AppComponent {
     prepareRoute(outlet: RouterOutlet) {
       return outlet?.activatedRouteData?.animation;
     }
   }
   

   • 修改根组件模板，给路由插座容器绑定动画触发器，传入当前路由状态：

   <div [@routeAnimations]="prepareRoute(outlet)">
     <router-outlet #outlet="outlet"></router-outlet>
   </div>
   

   • 给所有路由规则添加对应的animation标记，保证动画能拿到明确的前后状态：

   const routes: Routes = [
     { path: 'movie', component: MovieComponent, data: { animation: 'MoviePage' } },
     { path: 'game', component: GameComponent, data: { animation: 'GamePage' } },
     { path: 'show', component: ShowComponent, data: { animation: 'ShowPage' } },
     { path: 'media/:type/:id', component: DetailsPageComponent, data: { animation: 'DetailsPage' } },
   ];
   

仅给详情页配置animation标记时，通配符* <=> *规则虽理论上可触发，但状态匹配不稳定，给所有路由配置对应animation值是官方推荐的稳定写法。

效果验证 #

修改完成后点击顶栏导航，路由会正常执行组件挂载卸载流程，动画查询可正确获取进出节点，详情页跳转、普通页面互跳的过渡动画都会按预期执行，不会再抛出空查询错误。

内容的提问来源于stack exchange，提问作者Etienne G.