Ionic4 本机页面转换不适用于路由器导航

Question

导航到新 url 时，页面转换不起作用。

我已经尝试了所有导航 ionic angular 的可能性routerLink href router.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

有两种方法可以实现这一点。第一种方法是使用角度动画。第二种方式是 Native Page Transitions 插件。

对于 Angular 动画，请按照以下步骤操作。您还可以查看本教程：

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

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