Ionic 在Angular中的选项卡之间导航的正确方式是什么？

4nkexdtk 于 2022-12-16 发布在 Ionic

关注(0)|答案(3)|浏览(147)

在我的项目中，我使用的是Angular 13 / Ionic 6。我的项目包含应用程序每个主要部分的选项卡，然后有几个选项卡在该选项卡中有子部分。
我注意到一些奇怪的行为时，试图导航到一个子节在我的一个标签从另一个标签。
例如，这是我的应用程序的路线：

/app/tabs/home
/app/tabs/section1
/app/tabs/section2
/app/tabs/section2/sub-section

以下是我的路由模块：
app-routing.module.ts

const routes: Routes = [
  {
    path: 'app',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'consent',
    loadChildren: () => import('./pages/consent/consent.module').then( m => m.ConsentPageModule)
  },
  {
    path: '',
    redirectTo: 'consent',
    pathMatch: 'full'
  },
];

tabs-routing.module.ts:

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children:
        [
            {
                path: 'home',
                loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
            },
            {
                path: 'section1',
                loadChildren: () => import('./section1/section1.module').then( m => m.Section1PageModule)
            },
            {
                path: 'section2',
                loadChildren: () => import('./section2/section2.module').then( m => m.Section2PageModule)
            },
            {
                path: 'section3',
                loadChildren: () => import('./section3/section3.module').then( m => m.Section3PageModule)
            },
            {
                path: '',
                redirectTo: '/tabs/home',
                pathMatch: 'full'
            }
        ]
    },
    {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
    }
];

section2-routing.module.ts:

const routes: Routes = [
  {
    path: '',
    component: Section2Page
  },
  {
    path: 'sub-section',
    loadChildren: () => import('./sub-section/sub-section.module').then( m => m.SubSectionPageModule)
  },
  {
    path: 'sub-section2',
    loadChildren: () => import('./sub-section2/sub-section2.module').then( m => m.SubSection2PageModule)
  },
  {
    path: 'sub-section3',
    loadChildren: () => import('./sub-section3/sub-section3.module').then( m => m.SubSection3PageModule)
  },
];

当我尝试使用我的/app/tabs/home中的routerLink链接到/app/tabs/section2/sub-section时，它产生了一个奇怪的行为。没有动画或部分之间的幻灯片过渡，屏幕变白色一秒钟，然后加载新的视图。
我甚至尝试从点击的方法使用路由器服务，也有同样的体验。
有没有想过是什么原因造成的？

ionic-framework

来源：https://stackoverflow.com/questions/73081582/what-is-the-correct-way-to-navigate-across-tabs-in-angular

3条答案

按热度按时间

pxy2qtax1#

首先，我想指出，你的概念本身并不是“最佳实践”。
如果你真的需要把标签分成子部分，那么最好不要使用页面，而是使用同一页面中的实际部分，或者如果“部分”与各自的标签没有直接关系，则使用独立页面。
现在试着在routes数组的末尾添加一个通配符，然后用Router.navigation代替routerlink进行导航。

赞(0）回复(0）举报 2022-12-16

lyr7nygr2#

可以使用“Angular 动画”来实现。
导入浏览器动画模块。

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

创建路径动画.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%'}))
        ])
      ]),    
      // Required for child animations on the page
       query(':leave', animateChild()),
       query(':enter', animateChild()),
  ]),
]);

赞(0）回复(0）举报 2022-12-16

ibrsph3r3#

我认为这可能与正在获取的模块有关。请尝试预加载它们。

RouterModule.forRoot(
  appRoutes,
  {
    preloadingStrategy: PreloadAllModules
  }
)

赞(0）回复(0）举报 2022-12-16

我来回答

Ionic 在Angular中的选项卡之间导航的正确方式是什么？

3条答案

相关问题

热门标签

最新问答