Анимация не работает в компоненте с отложенной загрузкой - PullRequest
Новая
       59

Анимация не работает в компоненте с отложенной загрузкой

1 голос
/ 16 июня 2020

Я пытаюсь создать анимацию для компонента, загруженного лениво. Ниже указан код модуля приложения 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

ts-файл компонента приложения 

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { slideInAnimation } from './animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    slideInAnimation
    // animation triggers go here
  ]
})
export class AppComponent {
  title = 'animation';

  prepareRoute(outlet: RouterOutlet) {
    return outlet.activatedRouteData.animation;
  }
}

компонент приложения html файл 

<main [@routeAnimations]="prepareRoute(outlet)">
  <nav class="nav nav-pills flex-column flex-sm-row" >
    <a class="flex-sm-fill text-sm-center nav-link " routerLink="/home" routerLinkActive="active">Home</a>
    <a class="flex-sm-fill text-sm-center nav-link " routerLink="/lazy/lazycomponent" routerLinkActive="active">Lazy Component</a>
  </nav>
  <router-outlet #outlet="outlet"></router-outlet>
</main>

модуль маршрутизации приложения 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  {path: 'lazy', loadChildren: './lazy-loaded/lazy-loaded.module#LazyLoadedModule'},
  {path: 'home', component: HomeComponent, data: { animation: 'home'}}
];

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

модуль маршрутизации для ленивой загруженной части 

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LazyLoadedComponent } from './lazy-loaded.component';


const routes: Routes = [
  {path: 'lazycomponent', component: LazyLoadedComponent, data: { animation: 'lazy'} }
];

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

анимация 

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

export const slideInAnimation =
  trigger('routeAnimations', [
    transition(':enter', [
      style({ opacity: 0 }),
      animate('100ms', style({ opacity: 1 })),
    ]),
    transition(':leave', [
      animate('100ms', style({ opacity: 0 }))
    ])
  ]);

Вы можете найти код дыры в репозитории github: https://github.com/GreyM22/test-animation

...