angular - 模块嵌套组件动画

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>

我希望我的动画在 start 和 child 组件之间工作，但它不起作用，因为 startComponent 没有在 router-outlet 内呈现。如果我将 startComponent 添加到 DefaultComponent 的子级，那么它可以工作，但是我必须在 URL 中添加一个新的 startcomponent 路径，我不希望这样。

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

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

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

感谢您的任何帮助。

正如我之前写的，我可以将 startcomponent 添加到 defaultcomponent 子组件中，它会起作用，因为 router-outlet 可以轻松管理它。

标签： angularangular8angular-animations

Answer 1

这行得通，因此在 url 中没有任何路径呈现 StartComponent。和动画作品就像它应该的那样。

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