Angular路由过渡名称中能否传递数据？附代码示例

当然可以啦！在Angular里，你完全可以把路由配置里的data数据传递给过渡动画，甚至用这些数据来控制不同的过渡效果。结合你给出的代码，我来一步步给你拆解实现方式：

1. 从RouterOutlet获取路由Data #

你模板里的getPage(appOutlet)方法已经踩中了正确方向，我们只需要在这个方法里直接提取路由配置中的data即可：

// app.component.ts
import { RouterOutlet } from '@angular/router';

// ...
getPage(outlet: RouterOutlet) {
  // 直接获取路由配置里的page字段，默认值设为home
  return outlet.activatedRouteData?.['page'] || 'home';
}

这个方法会返回当前激活路由的page值，模板里的[@animRoutes]就会把这个值作为动画的触发条件。

2. 根据传递的Page值定义不同过渡 #

拿到page值后，你可以在动画定义里针对不同的页面切换场景写专属过渡效果，比如：

// app.component.ts
import { trigger, transition, style, animate, query } from '@angular/animations';

@Component({
  // ...
  animations: [
    trigger('animRoutes', [
      // 通用的页面切换过渡
      transition('* => *', [
        query(':enter', [
          style({ opacity: 0, transform: 'translateX(20px)' }),
          animate('300ms ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
        ], { optional: true }),
        query(':leave', [
          animate('300ms ease-in', style({ opacity: 0, transform: 'translateX(-20px)' }))
        ], { optional: true })
      ]),
      // 针对home到work-1的专属过渡
      transition('home => work-1', [
        query(':enter', [
          style({ opacity: 0, transform: 'scale(0.8)' }),
          animate('400ms cubic-bezier(0.4, 0, 0.2, 1)', style({ opacity: 1, transform: 'scale(1)' }))
        ], { optional: true })
      ]),
      // 针对work-1到work-2的专属过渡
      transition('work-1 => work-2', [
        query(':enter', [
          style({ opacity: 0, transform: 'translateY(20px)' }),
          animate('350ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
        ], { optional: true })
      ])
    ])
  ]
})

这样不同页面切换时，Angular会根据getPage返回的page值匹配对应的过渡动画。

3. 传递更多动态参数到动画 #

如果需要传递更多数据（比如动画时长、自定义位移值），你还可以让getPage返回一个包含多个参数的对象：

// 修改路由配置，添加更多data字段
{ 
  path: 'work-1', 
  component: WorkOneComponent, 
  data: { 
    page: 'work-1',
    animationDuration: '500ms',
    enterTransform: 'translateX(50px)'
  } 
}

// app.component.ts里的getPage方法
getPage(outlet: RouterOutlet) {
  const routeData = outlet.activatedRouteData;
  return {
    page: routeData['page'] || 'home',
    duration: routeData['animationDuration'] || '300ms',
    enterTransform: routeData['enterTransform'] || 'translateX(20px)'
  };
}

然后在动画定义里使用这些参数：

trigger('animRoutes', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0, transform: '{{ enterTransform }}' }),
      animate('{{ duration }} ease-out', style({ opacity: 1, transform: 'translateX(0)' }))
    ], { optional: true }),
  ], { 
    // 设置参数默认值，防止路由没有配置时出错
    params: { 
      duration: '300ms',
      enterTransform: 'translateX(20px)'
    } 
  })
])

模板里的绑定方式不需要修改，依然是[@animRoutes]="getPage(appOutlet)"，Angular会自动解析传递的参数。

核心原理总结 #

路由配置里的data字段会被挂载到RouterOutlet的activatedRouteData属性上，我们只需要通过这个属性提取数据，再把数据绑定到动画触发器上，就能实现用路由数据控制过渡动画的效果——不管是区分过渡场景，还是动态调整动画参数都完全可行。

内容的提问来源于stack exchange，提问作者Timtest