Angular 如何实现角度管线动画？

我正在尝试实现角度路线动画。我遵循了文档并参考了此视频：。但是我不能让动画工作。以下是迄今为止的代码：

动画.ts styles.css 有人能帮忙吗

---

提前感谢。

您需要在路由中添加数据：{animation:'HomePage'}

  { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },

---

根据

谢谢你提出这个问题。你能用你到目前为止尝试过的源代码例子更新你的问题吗。有一个到stackblitz的链接是非常有用的，但是人们不会费心在外部站点上查看您的代码。您将通过更好的细节获得更好的参与度。请添加这是路线{path:'home'，component:HomeComponent，data:{animation:'HomePage'}，谢谢@Reactgular。我在这里添加了代码片段，非常感谢@jadavplak。现在对我有用了。我已经找了2-3个小时的解决方案。

<a [routerLink]="['home']">Home</a>&nbsp;&nbsp;&nbsp;<a [routerLink]="['hello']">Hello</a>
<div class="route-content" [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

import { Component } from '@angular/core';
import { fader } from './animations';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    fader
  ]
})
export class AppComponent  {
  name = 'Angular';
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  }
}

.route-content {
  position: relative;
}

  { path: 'home', component: HomeComponent, data: {animation: 'HomePage'} },