ionic-team / ionic-team/ionic-framework

bug: Missing navigation animations when navigating from tabs

未关闭
#18,857 3 条评论 6 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

package: angular type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 14 小时
30 天内合并 PR
50

描述

Bug Report

Navigating forward from a tab page to another sub-page will not show the router transition animation if the sub-page is listed inside the tabs.router.module.ts

Ionic version:

[x] 4.6

Current behavior:

In my application I wanna show the tabs all the time also on sub pages. To react this case I have to list my subpages inside the tabs.router.module.ts file.
If I navigate now from Tab1 to Page1, there will be no router transition animation and the back button usage is not that intuitive anymore.

Expected behavior:

It should be possible to navigate from tabs to pages listed as subpages inside the tabs.router.module.ts file with router transition animations and back button support oob.

Steps to reproduce:

  1. Create an new tabs project
  2. Create a empty page
  3. Add the page as a sub page inside the tabs.router.module.ts file
  4. Navigate forward to the child page

Related code:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tabDatesRoot',
        children: [
          {
            path: '',
            loadChildren: '../pages/dates/dates.module#DatesPageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tabDatesRoot',
        pathMatch: 'full'
      },
      {
        path: 'pages',
        children: [
          { path: 'map', loadChildren: '../pages/map/map.module#MapPageModule' },
        ]
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tabDatesRoot',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

Ionic info:

Ionic:

   Ionic CLI                     : 5.2.3 (/Users/danielsogl/.nvm/versions/node/v12.4.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Capacitor:

   Capacitor CLI   : 1.1.1
   @capacitor/core : 1.1.1

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.4.0 (/Users/danielsogl/.nvm/versions/node/v12.4.0/bin/node)
   npm    : 6.10.1
   OS     : macOS Mojave```

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

创建一个新的 Ionic tabs 项目,按照所示的路由结构在 tabs.router.module.ts 中添加一个空的子页面,并复现从一个 tab 进行前向导航。检查 tab 的子路由和 router 的过渡行为;当导航到子页面时显示过渡动画,并为返回按钮提供直观的支持,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, typescript
领域
frontend, mobile
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
25/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。