在角4跃迁名称中传递数据

Question

是否可以在角转换名称中传递数据？

我正在跟踪本教程，基本上我有以下代码：

路由

{
  path: '',
  component: HomeComponent,
  data: { page: 'home' }
 },
 {
  path: 'work-1',
  component: WorkOneComponent,
  data: { page: 'work-1' }
 },
 {
  path: 'work-2',
  component: WorktwoComponent,
  data: { page: 'work-2' }
 }

App.component.html

<div class="main-content" [@animRoutes]="getPage(appOutlet)">
    <router-outlet #appOutlet="outlet"></router-outlet>
</div>

App.component.js

getPage(outlet) {
    return outlet.activatedRouteData['page'] || 'home';
}

动画

export const animRoutes =
trigger('animRoutes', [
    transition('* => work-1', [...work animation here...]),
    transition('* => work-2', [...work animation here...]),
    transition('* => *', [...other animation here...])
]);

Work-1和Work-2有相同的动画。有可能有像transition('* => work-{{id}}', [..])这样的东西吗

或者，如果不是，可能有这样的正则表达式：transition('* => ^work, [..])？

谢谢

-编辑--

编写本教程的人，Gerard，给我一个答复。

// * => work-1, work-2, work-3, etc
const matchesWorkState = (fromState: string, toState: string): boolean => (!!toState && toState.toLowerCase().startsWith('work-detail-'));
export const animRoutes =
trigger('animRoutes', [
    transition( matchesWorkState, animWork),
    transition('* => *', otherAnim)
]);

请注意，在“是答案”中，他编写了不起作用的transition( matchesWorkState(), animWork)。更喜欢transition( matchesWorkState, animWork) (不带括号)

Answer 1

根据我的评论和我的一些想法，我可能已经找到了一种方法来创建您的所有过渡一次。

从你的路线开始：

export const routerTransitions = routes.map(route => {
  return transition('* => ' + route.data.page, [/* animations */]);
});

这将为您提供一系列的转换：

[
  transition('* => work-0', ...),
  transition('* => work-1', ...),
  transition('* => work-2', ...),
]

现在，您可以使用这个数组和一个扩展操作符来声明您的动画：

trigger('animRoutes', [
  ...routerTransitions
])