Angular 7 Route动画在嵌套的路由器插座中不起作用

Question

我目前正在尝试Angular7路线过渡动画， 并遇到以下问题：

在我的应用中，有一个入口组件，它具有自己的路由模块和<router-outlet>。我想要实现的是，每当路线更改时，旧显示的组件就会opacity: 0在新组件消失之前消失（）。但是不幸的是，我似乎无法使其正常工作。动画根本不播放，并且按照角度文档中的说明进行调试：动画过渡和触发器

(@routeAnimation.start)="onAnimationEvent($event)"
(@routeAnimation.done)="onAnimationEvent($event)"

显示动画仅触发一次（在页面加载时；甚至不播放），但不是在我使用导航器组件浏览应用程序时触发的。

我的代码如下所示：

entry.component.ts

@Component({
  selector: 'entry',
  templateUrl: './entry.component.html',
  styleUrls: ['./entry.component.css'],
  animations: [routeAnimation],
})
export class EntryComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

  prepareRoute(outlet: RouterOutlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || 'WelcomePage';
  }
}

entry.component.html

<navigator>
</navigator>
<div [@routeAnimation]="prepareRoute(o)" id="entry-content">
  <router-outlet #o="outlet" name="entry"></router-outlet>
</div>

entry-routing.module.ts

const routes: Routes = [
  {
    path: 'entry',
    component: EntryComponent,
    children: [
        {
            path: '',
            component: WelcomeComponent,
            outlet: 'entry',
            data: { animation: 'WelcomePage' }
        },
        {
            path: 'introduction',
            component: IntroductionComponent,
            outlet: 'entry',
            data: { animation: 'IntroductionPage' }
        }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EntryRoutingModule { }

route.animation.ts

export const routeAnimation = trigger(
  'routeAnimation', [
    transition('* => *', [
      group([
        query(':enter', style({ opacity: 0 })),
        query(':leave', [
          animate('0.5s', style({ opacity: 0 })),
          style({ display: 'none' })
        ], { optional: true }),
        query(':enter', [
          animate('2s',
          style({ opacity: 1 })),
          animateChild()
        ], { optional: true })
      ])
    ]),
  ]
);

任何想法缺少什么/我做错了什么？非常感谢您的帮助，在此先感谢您！

Answer 1

在这里，你的

Entry.component.html 是，

<navigator>
</navigator>
<div class="parent-router-cls" [@routeAnimation]="o.isActivated ? o.activatedRoute : ''" id="entry-content">
  <router-outlet #o="outlet" name="entry"></router-outlet>
</div>

入口.组件.scss

.parent-router-cls{
    position: relative;
    router-outlet ~ * {
        position: absolute;
        height: 100%;
        width: 100%;
    }
}

在这里，我认为你想要所有路由器出口上的动画，我认为不需要在entry-routing.module.ts中添加动画

data: { animation: 'WelcomePage' }

所以，你的entry-routing.module.ts将是，

const routes: Routes = [
  {
    path: 'entry',
    component: EntryComponent,
    children: [
        {
            path: '',
            component: WelcomeComponent,
            outlet: 'entry',
        },
        {
            path: 'introduction',
            component: IntroductionComponent,
            outlet: 'entry',
        }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EntryRoutingModule { }

动画文件将是，

import {
    trigger,
    animate,
    transition,
    style,
    query,
    group
  } from '@angular/animations';
  
export const fadeAnimation = trigger('fadeAnimation', [
  transition('* => *', [
    query(
      ':enter',
      [style({ opacity: 0 })],
      { optional: true }
    ),
    query(
      ':leave',
      [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ':enter',
      [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
      { optional: true }
    )
  ])
]);