Tabs 为什么单击侧边菜单后选项卡会丢失？

我用tabs模板开始我的项目，然后在其中添加侧菜单。选项卡和侧边菜单都可以工作，但若我单击菜单项，页面会丢失选项卡视图

应用程序组件.ts

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage = TabsPage;

  pages: Array<{title: string, component: any}>;

  constructor(public platform: Platform) {

    this.initializeApp();

    // used for an example of ngFor and navigation
    this.pages = [
      { title: 'Home', component: HomePage },
      { title: 'About', component: AboutPage },
      { title: 'Contact', component: ContactPage }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }

  openPage(page) {
    // Reset the content nav to have just this page
    // we wouldn't want the back button to show in this scenario
    this.nav.setRoot(page.component);
  }

@组件({
templateUrl:'app.html'
})
导出类MyApp{
@ViewChild（导航）导航：导航；
rootPage=TabsPage；
页面：数组；
建造商（公共平台：平台）{
这是.initializeApp（）；
//用于ngFor和导航的示例
此页=[
{标题：“主页”，组件：主页}，
{title:'About'，组件：AboutPage}，
{标题：“联系人”，组件：ContactPage}
];
}
初始化EAPP（）{
this.platform.ready（）。然后（（）=>{
//好了，平台准备好了，我们的插件也可以使用了。
//在这里，您可以做任何您可能需要的更高级别的本地操作。
StatusBar.styleDefault（）；
Splashscreen.hide（）；
});
}
openPage（第页）{
//将内容导航重置为仅包含此页面
//我们不希望在这种情况下显示“后退”按钮
this.nav.setRoot（page.component）；
}

app.html

<ion-menu [content]="content" push persistent=true>
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="outer-content">
    <ion-list>
      <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        {{p.title}}
      </button>
    </ion-list>
  </ion-content>    
</ion-menu>    
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

菜单
{{p.title}}

问题在于，您正在将从菜单中选择的组件设置为根目录

this.nav.setRoot(page.component);

这会将现有选项卡页替换为选定页作为根，而不是更改选项卡页的选定选项卡

一种解决方案是使用Observable/Subject或服务将页面对象从

openPage（）

函数发送到TabsPage

openPage(page) {

    this.events.publish('menu selected',page);

  }

在你的桌子上

ngOnInit(){
this.events.subscribe('menu selected',this.openPage.bind(this))
}
openPage(page){

  this.tabs.select(page.index);//set an additional property with index same as tab order.
}

---

我发现我的问题是组件设置根。谢谢大家！嗨，我知道这是一个老问题，但我很想知道你是怎么做的，因为我面临着同样的问题。不知道你所说的“组件设置根”是什么意思。