Question

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

Answer 1

因为我的项目是一个使用Ionic的角度项目，并且要在应用程序的所有子页面上都具有离子标签，所以必须处理角度导航。

我想显示底部带有选项卡的详细信息页面，所以我使用了这种方法：在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'
          }
        ]
      }
    ]
  }

因此，“详细信息”页面和“内部细节”页面现在将在底部具有选项卡。详细信息页面的网址为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');
    }

}

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

如何在子页面上显示离子标签？

1 个答案: