Угловая маршрутизация со слайд-анимацией в мастере / вкладке сведений в ионном приложении - PullRequest
Новая
       65

Угловая маршрутизация со слайд-анимацией в мастере / вкладке сведений в ионном приложении

0 голосов
/ 07 ноября 2019

У меня есть приложение ionic 4 с интерфейсом вкладок, реализованным с угловой маршрутизацией.

В одной вкладке у меня есть список предметов. Я хочу перейти на страницу сведений об элементе при нажатии на один элемент с анимацией слайдов

На угловом сайте я нашел, как реализовать анимацию маршрутизации (https://angular.io/guide/route-animations), но с плоскими страницами. Я не знаю, как изменить код, чтобы он работал на вкладке с основными / подробными страницами.

HomePage - это вкладка. CatsPage - это вкладка со списком элементов, а CatDetailPage - страница сведений, когда я нажимаю на элемент. Я попробовал код выше. Он работает, но не скользит и не могу'понять, в чем проблема.

app.component.html: 

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

app.component.ts: 

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

app.module.ts: 

       ...
       @NgModule({
       declarations: [AppComponent],
       entryComponents: [],
       imports: [BrowserModule,
                 IonicModule.forRoot(),
                 AppRoutingModule,
                 BrowserAnimationsModule
                ]
         });
        ...

app-routing-module.ts: 

    import { NgModule } from '@angular/core';
    import { PreloadAllModules, RouterModule, Routes } from 
       '@angular/router';

    const routes: Routes = [
    { path: '',
       loadChildren: () => import('./home/home.module').then(m => 
       m.HomePageModule) },
    { path: 'home', loadChildren: () => import('./home/home.module').then( 
       m => m.HomePageModule)},
    { path: 'cats', loadChildren: './cats/cats.module#CatsPageModule', 
      data: {animation: 'CatsPage'} },
    { path: 'catDetail', loadChildren: './cat-detail/cat- 
      detail.module#CatDetailPageModule', data: {animation: 
     'CatDetailPage'}  }
     ];

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

home-routing-module.ts: 

    ...
    const routes: Routes = [
     {
      path: 'home',
      component: HomePage,
      children: [
          {
           path: 'cats',
           children: [
             {
               path: '',
               loadChildren: () =>
               import('../cats/cats.module').then(m => m.CatsPageModule)
           } ,
           {
             path: 'cats/catDetail',
             loadChildren: () =>
                import('../cat-detail/cat-detail.module').then(m => 
                m.CatDetailPageModule)
           }
       ]
      }
     ];
     ...

animations.ts: 

     ...
     export const slideInAnimation =
       trigger('routeAnimations', [
         transition('CatsPage <=> CatDetailPage', [
         style({ position: 'relative' }),
         query(':enter, :leave', [
           style({
             position: 'absolute',
             top: 0,
             left: 0,
             width: '100%'
         })
       ]),
       query(':enter', [
         style({ left: '-100%'})
        ]),
       query(':leave', animateChild()),
        group([
        query(':leave', [
          animate('300ms ease-out', style({ left: '100%'}))
         ]),
        query(':enter', [
           animate('300ms ease-out', style({ left: '0%'}))
           ])
       ]),
        query(':enter', animateChild()),
      ])
      ...
...