Angular 11 子路径动画不起作用答案

【问题标题】：Angular 11 child route animation is not workingAngular 11 子路径动画不起作用
【发布时间】：2023-03-03 21:23:01
【问题描述】：

我最近在有条件显示 (*ngif) 父元素 (see here) 中遇到了一些关于子路径动画的问题。为了解决这个问题，我创建了一个小示例项目，以便为此评估一个干净的解决方案并将其转移回原始项目。但是，即使在这个非常基本的示例项目中，路由器动画现在也完全不能按预期工作。

动画在页面加载时播放，但在更改路由时不播放（它只显示相应的子路由）。

我遵循了angular 的指示，并遵循了this tutorial。我在网上搜索，但没有找到我的问题的答案。而且，我检查了很多次，如果我犯了任何错误，但我似乎找不到。

app.module.ts

我导入的所有组件和模块如下：

@NgModule({
  declarations: [
    AppComponent,
    ParentComponent,
    Child1Component,
    Child2Component,
    Child3Component,
    Child4Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

app-routing.module.ts

我将路线声明如下：

const routes: Routes = [
  { path: '', redirectTo: 'p', pathMatch: 'full' },
  {
    path: 'p', component: ParentComponent,
    children: [
      { path: '', redirectTo: 'c1', pathMatch: 'full' },
      { path: 'c1', component: Child1Component, data: { animation: 'toleft' } },
      { path: 'c2', component: Child2Component, data: { animation: 'toleft' } },
      { path: 'c3', component: Child3Component, data: { animation: 'toleft' } },
      { path: 'c4', component: Child4Component, data: { animation: 'toleft' } },
    ]
  }
];

app.components.html

<div><a routerLink="/p/c1">C1</a></div>
<div><a routerLink="/p/c2">C2</a></div>
<div><a routerLink="/p/c3">C3</a></div>
<div><a routerLink="/p/c4">C4</a></div>
<app-parent></app-parent>

parent.component.html

<div
  [@routeAnimations]="prepareRoute(outlet)"
  style="position: relative;"
>
  <router-outlet #outlet="outlet"></router-outlet>
</div>

parent.component.ts

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { fader } from '../animation';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.scss'],
  animations: [
    fader,
  ]
})
export class ParentComponent implements OnInit {
  constructor() { }
  ngOnInit(): void { }

  public prepareRoute = (outlet: RouterOutlet) => {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
}

animation.ts

import { trigger, style, animate, transition, query } from '@angular/animations';

export const fader =
  trigger('routeAnimations', [
    transition('* <=> *', [
      // Set a default  style for enter and leave
      query(':enter, :leave', [
        style({
          position: 'absolute',
          left: 0,
          width: '100%',
          opacity: 0,
          transform: 'scale(0) translateY(100%)',
        }),
      ], { optional: true }),
      // Animate the new page in
      query(':enter', [
        animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })),
      ], { optional: true })
    ]),
  ]);

【问题讨论】：

标签： javascript angular animation routes

【解决方案1】：

[@routeAnimations]="prepareRoute(outlet)" 和transition('* <=> *' 表示如果prepareRoute(outlet) 更改其值，则路线动画将“激活”。正如我在您的情况下看到的那样，它可以从“toleft”变为“toleft”。制作不同的动画名称，以便 Angular 知道要运行哪些动画。例如

{...page1, data: {animation: 'level1-page'}},
{...page2, data: {animation: 'level2-page'}},

transition('level1-page => level2-page', toLeftAnimation),
transition('level2-page => level1-page', toRightAnimation)

【讨论】：