Angular 条件：以角度输入组件的动画

考虑到我的应用程序路线：

const appRoutes: Routes = [
  {
    path: '', component: HomeComponent, children: [
    {path: 'datascreen', component: DataComponent},
    {path: '', component: IntroComponent}
  ]
  }
];

我有一个主屏幕，默认情况下应该会显示导入组件。当用户单击介绍组件上的按钮时，它将导航到DataComponent

通过DataComponent上的按钮，用户可以导航回Intro组件

HomeComponent的模板仅包含插座：

<router-outlet></router-outlet>

我确实希望将滑入/滑出动画添加到导入组件。这可以通过在“：enter”和“：leave”上添加一个动画到IntroComponent来轻松实现。这个很好用

但现在，当屏幕第一次渲染时，也会显示此动画。这看起来有些混乱

所以我的问题是：

---

如何向仅在初始加载后执行的组件添加动画？或者换句话说：如何在组件的第二次出现时执行：enter动画？

创建角度动画时，有几个非常重要的状态。第一个状态是

void=>*

。这与速记

相同：输入

首次加载视图时，您正在点击该动画事件。
如果在组件内部放置触发器，那么每次启动该组件时，它都会触发该触发器，就像每次运行组件时，它都会触发它内部的代码一样。因此，问题的解决方案是将动画移出组件，而是使用控制整个应用程序动画的动画触发器包装路由器出口

您希望将
：输入
设置为应用程序加载的动画，如淡入或相关内容，然后您希望使用滑入和滑出方法将动画从路线1设置为路线2。这样，如果你导航它，它会左右滑动，但如果你加载它，它就会消失

摘自《穆年》

app.html

<div [@routeAnimation]="prepRouteState(routerOutlet)">
  <!-- make sure to keep the ="outlet" part -->
  <router-outlet #routerOutlet="outlet"></div>
<div>

应用程序ts

@Component({
animations: [
trigger('routeAnimation', [
  // no need to animate anything on load
  transition(':enter', []),
  // when we go away from the home page to support
  transition('homePage => supportPage', [
      group([
        query(':enter', [
          style({ opacity: 0 }),
          animate('0.5s', style({ opacity: 1 }))
        ]),
        query(':leave', [
          animate('0.5s', style({ opacity: 0 }))
        ])
      ])
    ]),
  // and when we go back home
  transition('supportPage => homePage', [
    // ...
  ])
])
]
})
class AppComponent {
  prepRouteState(outlet: any) {
  return outlet.activatedRouteData['animation'] || 'firstPage'; 
}
}

const ROUTES = [
  { path: '',
    component: HomePageComponent,
    data: {
      animation: 'homePage'
    }
  },
  { path: 'support',
    component: SupportPageComponent,
    data: {
      animation: 'supportPage'
    }
  }    
]

您能否创建一个StackBlitz示例，以便更容易获得长而好的答案。转换（':enter'，[]）部分在这里是至关重要的，其他部分是可选的。您可以使用带有进入/离开状态的通配符转换（'*=>*），而不是手动定义所有转换