I have a tabs page with some buttons on a toolbar, but recently with the addition of a new button I decided to, instead, migrate to using a sidemenu. So I added a menu to the template on app.component.ts
, like so:
template: `
<ion-menu #menu [content]="content" side="right" [enabled]="false">
<ion-content>
<button ion-item icon-left (click)="openGallery()">
<ion-icon name="images"></ion-icon>
{{ "gallery.gallery" | translate }}
</button>
<button ion-item icon-left (click)="newModal()">
<ion-icon name="add"></ion-icon>
{{ "new_record" | translate }}
</button>
<button ion-item icon-left (click)="about()">
<ion-icon name="settings"></ion-icon>
{{ "settings" | translate }}
</button>
</ion-content>
</ion-menu>
<ion-nav #content [root]="rootPage"></ion-nav>`
And then I added a ViewChild @ViewChild('content') content : Nav;
so I could push pages with this.content.push
; so far so good, but… On two of these buttons, I have to pass some parameters when pushing to the pages:
openGallery() {
this.nav.push(GalleryPage, {
record_to_show: 0,
category_to_show: this.filterProvider.filters.categoryFilter
});
}
While record_to_show
is simply the tab index, I can’t simply import the FilterProvider
I have in the app.component.ts
page as it causes some issues regarding when that provider is actually loaded. Is there a way to keep the functions in the tabs and then when the button on the menu is clicked, it runs the equivalent function, or some other solution?