Question

我使用标签模板启动项目，然后在其中添加侧边菜单。选项卡和侧面菜单都有效，但如果我点击菜单项，页面丢失标签视图。

app.components.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);
  }

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>

Answer 1

问题是您要将菜单中选择的组件设置为 root 。

this.nav.setRoot(page.component);

此将所选的页面替换为现有的TabsPage，而不是更改TabsPage的选定选项卡。

解决方案是使用Events API或具有Observable / Subject的服务将页面对象从openPage()函数发送到TabsPage。

openPage(page) {

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

  }

在你的TabsPage中，

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.
}

单击侧边菜单后为什么标签会丢失？

1 个答案: