Question

我想在我的延迟加载的模块路由中添加动画。

我的路线如下。

{
  const appRoutes: Routes = [
    { path: '', component: StartComponent, pathMatch: 'full' },
    {
      path: '/',
      component: DefaultComponent,
      child: [{
        { path: 'child', component: ChildComponent },
      }]
    }
  ];
}

在我的defaultComponent中，我有以下代码：

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

我希望动画在开始和子组件之间工作，但由于在路由器出口内未渲染startComponent，所以动画不起作用。如果我将startComponent添加到DefaultComponent的子级中，则它可以工作，但随后我必须在URL中添加一个新的路径来指向startcomponent，

/ login =>渲染startComponent / login / child =>呈现子组件

在这些路线之间，我想制作动画。

我可以设法做到吗？也许defaultComponent具有startComponent的内容？然后在默认<=>子级之间做动画？

谢谢您的帮助。

如我先前所写，我可以将startcomponent添加到defaultcomponent子级，并且它可以工作，因为router-outlet可以轻松地对其进行管理。

Answer 1

这有效，因此呈现了StartComponent，而url中没有任何路径。和动画的效果应该一样。

const routes: Routes = [
  {
    path: '',
    component: DefaultComponent,
    children: [
      {
        path: '',
        component: StartComponent,
        data: { animation: 'Start' },
      },
      {
        path: 'failure',
        component: FailureComponent,
        data: { animation: 'Failure' },
      },
    ],
  },
];

模块嵌套组件动画

1 个答案: