如何在 Angular 动画之后运行代码？

Question

我在 Angular 7 中设置了更改路线时的幻灯片动画。我现在遇到的问题是动画卡顿，因为我导航到的组件正在生命周期的动画期间执行代码OnInit。

动画完成后如何初始化组件的代码以防止丢帧？

编辑：

我正在使用路由器动画，这是我的设置：

app.component.html:

<div [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  animations: [routeAnimations]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
}

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'sign-in',
    loadChildren: './modules/sign-in/sign-in.module#SignInModule',
    data: {animation: 'slideLeft'}
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {animation: 'slideRight'}
  }
];

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

animations.ts:

export const routeAnimations =
  trigger('routeAnimations', [
    transition('slideLeft => slideRight', [
      // ...a bunch of animation code...
    ]),
    transition('slideRight => slideLeft', [
      // ...a bunch of animation code...
    ])
  ]);

Answer 1

您需要将动画中的开始和完成事件公开给子组件。

@Component({..})
export class AppComponent {
    public start$: Subject<AnimationEvent> = new Subject();
    public done$: Subject<AnimationEvent> = new Subject();
}

<div [@routeAnimations]="prepareRoute(outlet)"
     (@routeAnimations.start)="start$.next($event)"
     (@routeAnimations.done)="done$.next($event)">
   <router-outlet #outlet="outlet"></router-outlet>
</div>

现在将其注入AppComponent到路由器中使用的子组件中。

@Component({..})
export class ChildComponent implements OnDestroy {
    private readonly _destroyed: Subject<void> = new Subject();
    public constructor(app: AppComponent) {
        app.done$
           .pipe(first(), takeUntil(this._destroyed))
           .subscribe(()=> {
               // do special work here
           });
    }
    public ngOnDestroy() {
        this._destroyed.next();
    }
}