为什么简单的角路由动画不起作用？

问题描述

我有非常基本的路由角度动画，但是由于某些原因，它不起作用。 动画定义位于app.component.ts <router-outlet></router-outlet>和两个链接，单击它们时应将其链接到带有“淡入”动画的欣赏性子组件-但该动画不可见。 问题再现：link to stackblitz 我认为问题的根源在于query(':enter')不是“查询”（当我删除optional: true标志-控制台中有错误日志时）

解决方法

路由器动画不会触发，因为您传递给@routeAnimations的内容没有任何变化，它只是尝试在开始时运行。它应该是[@routeAnimations]=outlet.activatedRouteData.animation或随路线更改而更改的内容。遵循angular.io上的route animations guide并提供有关如何创建路线过渡动画的指南

,

请查看，我重做您的示例-需要向html和路由添加一些属性： https://stackblitz.com/edit/angular-ivy-dypkqg

const routes: Routes = [
  { path: '1',component: OneComponent,data: {animation: '1'}  },{ path: '2',component: TwoComponent,data: {animation: '2'}  },]

add import BrowserAnimationsModule

<a routerLink="1">1</a><br />
<a routerLink="2">2</a>

<div [@routeAnimations]="o && o.activatedRouteData 
      && o.activatedRouteData['animation']">
    <router-outlet #o="outlet"></router-outlet>
</div>

您可以返回自己的旧动画。