Ion Menu not toggling on pages with multiple instances


#1

I have a basic application whose purpose is to display an array of interlinked ‘topics’ (essentially long reports containing links to each other), and am having trouble getting the menus to work on each instance of the topic page.

The first topic page opens fine from the homepage, with everything working as expected, but when a link is clicked and a new topic page is pushed onto the stack, its menu toggle button does not work. It is my intuition which says that because the ion-menu is linked to the ‘topicView’ content section that the menu on the first instance of the topic page is the only one that will work (as ionic will search for the first ‘topicView’ content it can find).

Is this intended functionality? How can I force Ionic to display this side menu? I tried adding a unique ID to the [content] tag on each instance but get build errors. Ive included my topic-page.html below

<ion-menu id="itemHierarchy-{{_pageId}}" side="right" persistent="true" [content]="topicView">
	<ion-header>
		<ion-toolbar>
			<ion-title>Topic Navigation</ion-title>
		</ion-toolbar>
	</ion-header>

	<ion-content>
		//list content
	</ion-content>
</ion-menu>

<ion-header>
	<ion-navbar>
		<button ion-button right menuToggle="itemHierarchy-{{_pageId}}">
                     <ion-icon name="list"></ion-icon>
                </button>
		<ion-title>{{_topicName}}</ion-title>
	</ion-navbar>
</ion-header>

<ion-content #topicView padding>
	<div>
		<div *ngFor="let item of _itemHierarchy">
			//recursive content nodes containing html
		</div>
	</div>
</ion-content>

#2

If anyone could shed any light on whether or not it is actually possible to have multiple instances of pages with menus it would be great. As the workaround I’m having to implement is very complex. Im having to create a global state and manage multiple instances of the menus contents and communicate back and forth between that and the topic component…