[英]Ionic2 tabs + menuToggle
I'm new with Angular2,Iionic2, NodeJS ... and i'm trying to code some lines to learn.我是 Angular2、Iionic2、NodeJS 的新手……我正在尝试编写一些代码来学习。 In this "adventure", I wanted to do something like a screen with 3 tabs and a menuToggle.
在这个“冒险”中,我想做一些类似于带有 3 个选项卡和一个 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.
当应用程序运行时,我单击 menuToggle 按钮,在第一个选项卡中,它似乎工作正常,但在其余选项卡中,它没有。 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).
当我单击按钮时,在其他两个选项卡中,menuToggle 出现,但是一旦我尝试单击按钮它就不会消失,它只是执行诸如移动并再次返回并“永远”保持打开状态(菜单切换)。
the TS is: 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>
I'm using Ionic 2.0.0-beta.30 and buttons in the navigation bar just disappear with the menuToggle attribute.我正在使用 Ionic 2.0.0-beta.30 并且导航栏中的按钮与menuToggle属性一起消失。
This is my workaround:这是我的解决方法:
constructor(private menu: MenuController) { menu.enable(true); } toggle(){ this.menu.toggle(); }
<button (tap)="toggle()"> <ion-icon name="menu"></ion-icon> </button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.