1
私はAngular2、Iionic2、NodeJS ...で新しく、いくつかの行をコーディングして学習しています。この「アドベンチャー」では、3つのタブとmenuToggleを持つ画面のようなものを作りたかったのです。アプリケーションが実行され、最初のタブのmenuToggleボタンをクリックすると、正常に動作するように見えますが、残りのタブでは表示されません。ボタンをクリックすると、他の2つのタブでmenuToggleが表示されますが、ボタンをクリックしようとすると離されません。移動のようなものがあり、再び戻って来て、 "永遠に" menuToggle）。Ionic2 tabs + menuToggle
TSは次のとおりです。
//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>