如何使子页面的离子标签可见？

Question

我希望选项卡出现在整个应用程序中，但我没有在 Ionic 4 中找到任何解决方案。

Answer 1

因为我的项目是一个使用 Ionic 的角度项目，并且在应用程序的所有子页面上都有 ion-tabs 必须处理角度导航。

我想在底部显示带有选项卡的详细信息页面，所以我使用了这种方法：在 tabs.router.module.ts 中设置路由：

 {
    path: 'tab3',
    children: [
      {
        path: '',
        loadChildren: '../tab3/tab3.module#Tab3PageModule'
      },
      {
        path: 'details',
        children: [
          {
            path: '',
            loadChildren: '../details/details.module#DetailsPageModule'
          },
          {
            path: 'insideDetails',
            loadChildren: '../inside-detail/inside-detail.module#InsideDetailPageModule'
          }
        ]
      }
    ]
  }

所以现在详细信息页面和内部详细信息页面将在底部有选项卡。详细信息页面的 url 是 tabs/tab3/details。

tab3.page.html

<ion-content>

  <ion-button (click)='openDetailsInTab()'>Open Details with tab bar</ion-button>  

</ion-content>

tab3.page.ts

export class Tab3Page {
  constructor(public app: IonApp,
    private router: Router) { }

    openDetailsInTab() {
        this.router.navigateByUrl('/tabs/tab3/details');
    }

}

使用角度路由器 navigateByUrl 方法路由到该详细信息页面。