Как запустить код после анимации Angular? - PullRequest
Новая
       30

Как запустить код после анимации Angular?

0 голосов
/ 08 января 2019

Я настроил анимацию слайдов в Angular 7 при изменении маршрута. У меня сейчас проблема в том, что анимация заикается, потому что компонент, на который я перехожу, выполняет код во время анимации в жизненном цикле OnInit.

Как инициализировать код для компонента после завершения анимации, чтобы предотвратить выпадение кадров?

Edit:

Я использую анимацию маршрутизатора, вот мои настройки:

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...
    ])
  ]);

1 Ответ

0 голосов
/ 09 января 2019

Вам нужно будет выставить события start и done из анимации на дочерние компоненты. 

@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();
    }
}
...