Ionic4本机页面过渡在路由器导航上不起作用

Question

导航到新URL时，页面转换无效。

我已经尝试过像routerLinkhrefrouter.navigateByUrl()这样的导航离子角的所有可能性。我也尝试使用NativePageTransition插件。

app.component.html：

<ion-app>
  <ion-content>
      <ion-router-outlet></ion-router-outlet>
      <ion-tabs>
        <ion-tab-bar slot="bottom">
          <ion-tab-button
            *ngFor="let tab of tabs"
            [attr.tab]="tab.action ? null : tab.path"
            (click)="tab.action ? handleTabClick(tab) : null">
            <ion-label>{{ tab.name }}</ion-label>
            <ion-icon [name]="tab.icon"></ion-icon>
          </ion-tab-button>
        </ion-tab-bar>
      </ion-tabs>
  </ion-content>
</ion-app>

app-routing.module.ts：

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

const routes: Routes = [
  { path: '', redirectTo: 'explore', pathMatch: 'full' },
  { path: 'explore', loadChildren: './explore/explore.module#ExplorePageModule' },
  { path: 'business', loadChildren: './business/business.module#BusinessPageModule' },
];

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

explore.page.html：

<app-header [hideTags]="hideTags"></app-header>
<ion-content style="background: white;height: 100%;" (scroll)="onScroll($event)">
  <ion-card
    type="button"
    mode="ios"
    routerLink="/business"
    routerDirection="forward"
    *ngFor="let business of businesses">
    <ion-img [src]="business.images[0]"></ion-img>
  </ion-card>
</ion-content>

我希望/business的页面在上一个页面的顶部从右向左滑动。

Answer 1

有两种方法可以完成此操作。第一种方法是使用“角度动画”。第二种方法是本机页面转换插件。

对于Angular动画，请按照以下步骤操作。您也可以检查this tutorial：

1. 导入BrowserAnimationsModule。

   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   imports: [
       BrowserAnimationsModule, 
       BrowserModule,
       AppRoutingModule
   ]
   

2. 包装路由器插座

    import { slider } from './route-animation.ts';
   
   @Component({
     selector: 'app-root',
     animations: [ slider ]
   })
   
   prepareRoute(outlet: RouterOutlet) {
     return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
   }
   

3. 创建route-animation.ts文件

   export const slider =
     trigger('routeAnimations', [
       transition('* <=> *', [
         query(':enter, :leave', [
           style({
             position: 'absolute',
             top: 0,
             left: 0,
             width: '100%'
           })
         ], { optional: true }),
         query(':enter', [
           style({ left: '-100%'})
         ]),
         group([
           query(':leave', [
             animate('600ms ease', style({ left: '100%'}))
           ], { optional: true }),
           query(':enter', [
             animate('600ms ease', style({ left: '0%'}))
           ])
         ]),
         // Normalize the page style... Might not be necessary
   
         // Required only if you have child animations on the page
         // query(':leave', animateChild()),
         // query(':enter', animateChild()),
     ]),
   ]);
   

使用本机页面过渡

您也可以使用Native Page Transitions插件。尽管它目前无法维护，但是如果需要，您可以尝试一下。

不知道为什么它对您不起作用，但是请确保执行以下步骤：

1. 安装插件：ionic cordova plugin add com.telerik.plugins.nativepagetransitions和npm install @ionic-native/native-page-transitions

2. 将其添加到app.module.ts中的提供者列表中：

   import { NativePageTransitions } from '@ionic-native/native-page-transitions/ngx';
   ...
   providers: [NativePageTransitions]
   ...
   

3. 导航时，使用此

   import { NativePageTransitions, NativeTransitionOptions } from '@ionic-native/native-page-transitions/ngx';
   
   constructor(private nativePageTransitions: NativePageTransitions) { }
   
   ionViewWillLeave() {       
     let options: NativeTransitionOptions = {
       direction: 'left',
       duration: 500,
       slowdownfactor: 3,
       slidePixels: 20,
       iosdelay: 100,
       androiddelay: 150,
       fixedPixelsTop: 0,
       fixedPixelsBottom: 60
     }
   
     this.nativePageTransitions.slide(options);
   
   }
   

   或在导航之前：

   this.nativePageTransitions.slide(options);
   router.navigate(['myPath']);
   

您可以使用配置来播放您的最佳幻灯片。并且不要忘记，从页面返回时，您将需要向另一个方向滑动。