I'm new with Angular2,Iionic2, NodeJS ... and i'm trying to code some lines to learn. In this "adventure", I wanted to do something like a screen with 3 tabs and a menuToggle. When the app runs, and I click the menuToggle button, in the first tab, it seems to work properly, but in the rest of the tabs, it doesn't. When i click on the button, in the other two tabs, the menuToggle appears, but it does not go away once I try to click on the button, it just does something like move and come back again and stays opened "forever" (the menuToggle).
the TS is:
//import {Page} from 'ionic-angular';
import {Page, NavController, NavParams} from 'ionic-angular';
import {ViewController, Platform} from 'ionic-angular';
import {GitHubService} from '../../services/github.service';
import {Grupo} from '../../datos/grupo';
import {DetalleGrupo} from '../detalle-grupo/detalle-grupo';
@Page({
templateUrl: 'build/pages/list-grupos/list-gruposxl.html',
providers: [GitHubService]
})
class Grupos {
isAndroid: boolean = false;
public grupos: Grupo[];
public selectedGrupo: Grupo;
constructor(platform: Platform,
private nav: NavController,
private github: GitHubService) {
this.isAndroid = platform.is('android');
}
onPageWillEnter() {
//document.getElementById('md-tabs-icon').style.display = "block";
//document.getElementById('md-only').style.display = "none";
}
getGrupos() {
this.github.getGrupos().then(grupos => this.grupos = grupos);
}
ngOnInit() {
this.getGrupos();
}
onSelect(grupo: Grupo) {
this.selectedGrupo = grupo;
console.log('Hola' + grupo.nombre);
this.nav.push(DetalleGrupo, { paramGrupo: grupo});
}
}
@Page({
templateUrl: 'build/pages/list-grupos/stds_usr.html',
})
class Estados_usr {
isAndroid: boolean = false;
constructor(platform: Platform,
private nav: NavController) {
this.isAndroid = platform.is('android');
}
onPageWillEnter() {
//document.getElementById('md-tabs-icon').style.display = "block";
//document.getElementById('md-only').style.display = "none";
}
}
//Chats abiertos del usuario
@Page({
templateUrl: 'build/pages/list-grupos/opened-chats.html',
//providers: [GitHubService]
/* template:
'<ion-navbar *navbar hideBackButton [attr.danger]="isAndroid ? \'\' : null">' +
'<ion-title>Últimas conversaciones</ion-title>' +
'</ion-navbar>' +
'<ion-content>' +
'Chats</ion-content>'*/
})
class Chats_usr {
isAndroid: boolean = false;
constructor(platform: Platform) {
this.isAndroid = platform.is('android');
}
onPageWillEnter() {
//document.getElementById('md-tabs-icon').style.display = "block";
//document.getElementById('md-only').style.display = "none";
}
}
@Page({
template:
'<ion-tabs class="tabs-icon" [attr.danger]="isAndroid ? \'\' : null">' +
'<ion-tab tabIcon="contact" [root]="tabOne"></ion-tab>' +
'<ion-tab tabIcon="calendar" [root]="tabTwo"></ion-tab>' +
'<ion-tab tabIcon="chatbubbles" [root]="tabThree"></ion-tab>' +
'</ion-tabs>',
providers: [GitHubService]
})
export class ListGruposPageXL {
tabOne = Grupos;
tabTwo = Estados_usr;
tabThree = Chats_usr;
isAndroid: boolean = false;
constructor(platform: Platform,
private github: GitHubService,
private nav: NavController) {
this.isAndroid = platform.is('android');
}
onPageWillLeave() {
//document.getElementById('md-tabs-icon').style.display = "none";
//document.getElementById('md-only').style.display = "block";
}
}
<!-- ** list-gruposxl.html**
This is the page where the menut WORKS -->
<ion-nav id="nav" #content [root]="rootPage"></ion-nav>
<ion-menu [content]="content" id="leftMenu2" side="right">
<ion-toolbar primary>
<ion-title>Opciones</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item>
Login
</button>
<button ion-item>
Signup
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-navbar *navbar hideBackButton class="show-navbar">
<ion-title>Mis Grupos</ion-title>
<ion-buttons start>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button menuToggle="leftMenu2">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content class="card-background-page">
<ion-list *ngFor="#grupo of grupos"
[class.selected]="grupo === selectedGrupo">
<ion-card>
<img src={{grupo.imagen}}/>
<div class="card-title">{{grupo.nombre}}</div>
<div class="card-subtitle">{{grupo.descripcion}}</div>
<button primary clear item-left>
<ion-icon name="thumbs-up"></ion-icon>
<div>12 Likes</div>
</button>
<button primary clear item-left>
<ion-icon name="text"></ion-icon>
<div>4 Comments</div>
</button>
</ion-card>
</ion-list>
</ion-content>
<!-- **stds_usr**
In this page I have the problem mentioned before -->
<ion-nav id="nav2" #content [root]="rootPage"></ion-nav>
<ion-menu [content]="content" id="leftMenu" side="right">
<ion-toolbar primary>
<ion-title>Opciones</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item>
opcion menu estados 1
</button>
<button ion-item>
opcion menu estados 2
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-navbar *navbar hideBackButton class="show-navbar">
<ion-title>todos los estados</ion-title>
<ion-buttons start>
<button>
<ion-icon name="search"></ion-icon>
</button>
</ion-buttons>
<ion-buttons end>
<button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
<ion-content>
Página de Estados
</ion-content>
