时间戳

首页 > 解决方案 > Angular 11 子路径动画不起作用

javascript - Angular 11 子路径动画不起作用

问题描述

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

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

我遵循了angular的说明并遵循了本教程。我在网上搜索，但没有找到我的问题的答案。此外，我检查了多次，如果我犯了任何错误，但我似乎找不到一个。

app.module.ts

我导入了所有组件和模块，如下所示：

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

应用程序路由.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>

父组件.html

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

父组件.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;
  }
}

动画.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 })
    ]),
  ]);

标签： javascriptangularanimationroutes

解决方案

[@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)

推荐阅读