如何禁用导航动画？

Question

我有一个带有选项卡组件的项目，在我想在选项卡内实现导航之前，该项目工作正常。例如，我的 TEAM 选项卡有 2 subtabs/sections/pages TACTICS 和 INFORMATION，如果我在我的战术选项卡上并单击此按钮：

<ion-button routerLink="/tabs/team/information">INFO</ion-button>

它通过动画导航到该页面。有没有办法禁用该动画？或者它只是因为我的代码中的某些地方可能是错误的？

我的一部分 tabs.router.module.ts:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'team',
        children: [
          {
            path: 'tactics',
            children: [{
              path: '',
              loadChildren: () =>
              import('../team-tactics/team-tactics.module').then(m => m.TeamTacticsPageModule)
            },
            ]
          },
          {
            path: 'information',
            children: [{
              path: '',
              loadChildren: () =>
              import('../team-information/team-information.module').then(m => m.TeamInformationPageModule)
            }]

Answer 1

我想你可以使用 routerDirection。

In this article 它讨论了使用 root 做一个看起来像是替换了整个视图的动画，这听起来基本上没有动画：

 <ion-button expand="block" routerLink="/dashboard" routerDirection="root">
   Login
 </ion-button>

We add a block button which has two important properties: routerLink: The link/path that should be opened routerDirection: Determines the animation that takes place when the page changes

After a login, you most certainly want to ditch your initial page and start again with the inside area as a new starting point. In that case, we can use the direction “root,” which looks like replacing the whole view.

If you want to animate forward or backward, you would use forward/back instead.

如何禁用导航动画？

How to disable navigation animation?

routerlink

angular

ionic4