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

Question

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

我已经尝试了离子 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>

应用-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 动画。第二种方式是Native Page Transitions插件。

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

导入 BrowserAnimationsModule.

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

imports: [
    BrowserAnimationsModule, 
    BrowserModule,
    AppRoutingModule
]

包裹路由器插座

 import { slider } from './route-animation.ts';

@Component({
  selector: 'app-root',
  animations: [ slider ]
})

prepareRoute(outlet: RouterOutlet) {
  return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
}

创建路由-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 插件。尽管现在无法维护，但如果您愿意，可以尝试一下。

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

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

将其添加到 app.module.ts 中的提供商列表:

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

导航时，使用这个

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

你可以玩一下配置来满足你最好的幻灯片。并且不要忘记，从页面返回时需要向另一个方向滑动。

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

Ionic4 native page transitions not working on router navigate

ionic-framework

angular

ionic4