Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

151
Vistas
ionic 2 cómo incrementar la insignia en las pestañas

Intento cambiar el valor de la insignia si llega una notificación, pero no vengo al intercambio si tienes una idea me podrías ayudar.

pestañas.ts

 import { Component, ViewChild } from '@angular/core'; import { SQLite, Dialogs, Firebase } from 'ionic-native'; import { NavController, Platform, Tabs } from 'ionic-angular'; import { HomePage } from '../home/home'; import { NotificationPage } from '../notification/notification'; import { MessagesPage } from '../messages/messages'; import { MoiPage } from '../moi/moi'; import {GlobalVars} from '../../providers/varglobal' import {Injectable} from '@angular/core'; @Injectable() @Component({ templateUrl: 'tabs.html' }) export class TabsPage { // this tells the tabs componnent which Pages // should be each tab's root Page @ViewChild('myTabs') tabRef: Tabs; public database: SQLite; public people: Array<Object>; public home:any=''; tab1Root: any = HomePage; tab3Root: any = NotificationPage; tab4Root: any = MessagesPage; tab5Root: any=MoiPage; constructor(private platform:Platform,private nav:NavController,public lan: GlobalVars) { this.platform.ready().then(() => { Firebase.onNotificationOpen() .subscribe(res => { if(res.tap) { // background mode console.log(res.tap); console.log(res); } else if (!res.tap) { // foreground mode let num=parseInt(this.lan.getbadgeHome()); num=num+1; alert(num+' home'); this.home=num; alert(this.home); } }); }); }

pestañas.html

 <ion-tabs color="primary"> <ion-tab [root]="tab1Root" tabIcon="home" tabBadge={{"home"}} tabBadgeStyle="danger"></ion-tab> <ion-tab [root]="tab4Root" tabIcon="mail" tabBadgeStyle="danger"></ion-tab> <ion-tab [root]="tab5Root" tabIcon="person" ></ion-tab> </ion-tabs>

De hecho, logré recuperar la notificación e incrementar la variable num y ponerla en la variable home, pero el valor de la insignia no cambia.

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

Dado su ejemplo de sus pestañas, esto debería funcionar:

 <ion-tab [root]="tab1Root" tabIcon="home" tabBadge="{{tab1BadgeCount}}" tabBadgeStyle="danger"></ion-tab>

Con un simple controlador de:

 export class TabsPage { tab1Root: any = SomePage; tab1BadgeCount : number = 0; // default 0 constructor() { } incrementBadgeCount(){ this.tab1BadgeCount = this.tab1BadgeCount+1; } decrementBadgeCount(){ this.tab1BadgeCount = this.tab1BadgeCount-1; } }

Puede conectar esos métodos a un botón para probar.

Sin embargo, recomendaría el uso de Eventos para controlar el cambio del recuento de insignias, por ejemplo.

 export class TabsPage { tab1Root: any = SomePage; tab1BadgeCount : number = 0; // default 0 constructor(public events: Events) { } incrementBadgeCount(){ this.tab1BadgeCount = this.tab1BadgeCount+1; this.publishBadgeCountUpdate(); } decrementBadgeCount(){ this.tab1BadgeCount = this.tab1BadgeCount-1; this.publishBadgeCountUpdate(); } } subscribeToBadgeCountChange(){ // Method to run when tab count changes return this .events .subscribe("tabs-page:badge-update", this.refreshBadgeCount()); } publishBadgeCountUpdate(){ // Call this method when you have changed the count return this .events .publish("tabs-page:badge-update"); } refreshBadgeCount(){ // This method will be called when incrementBadgeCount or decrementBadgeCount are executed. // The beauty of the events approach is that you can cause a change to the tab count from any other view, without referencing the tabs page directly. } ionViewWillEnter() { this.subscribeToBadgeCountChange(); } }
about 4 years ago · Santiago Trujillo Denunciar

0

Como puede ver en la pestaña de documentos , Badge no es una propiedad de entrada y es un atributo. Entonces debería estar usando como se muestra a continuación

 <ion-tab [root]="tab1Root" tabIcon="home" tabBadge="{{home}}" tabBadgeStyle="danger"></ion-tab>

Actualizar :

Dado que está asignando el valor en el constructor, no podrá obtener el valor actualizado cuando esté cambiando. Necesito más información para solucionar esto. Una forma alternativa es usar una función de tiempo de espera para que cada 60 segundos verifique el último valor como se muestra a continuación

 setInterval(function() { this.platform.ready().then(() => { Firebase.onNotificationOpen() .subscribe(res => { if(res.tap) { // background mode console.log(res.tap); console.log(res); } else if (!res.tap) { // foreground mode let num=parseInt(this.lan.getbadgeHome()); num=num+1; alert(num+' home'); this.home=num; alert(this.home); } }); }, 60 * 1000);

Esto se suscribirá al servicio y actualizará su recuento de notificaciones.

about 4 years ago · Santiago Trujillo Denunciar

0

tabBadge={{tab1BadgeCount}} sin comillas dobles

y juegue con ese parámetro en su archivo ts .

about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda