Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

156
Views
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.

over 4 years ago · Santiago Trujillo
3 answers
Answer question

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(); } }
over 4 years ago · Santiago Trujillo Report

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.

over 4 years ago · Santiago Trujillo Report

0

tabBadge={{tab1BadgeCount}} sin comillas dobles

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!