Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

150
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

0

tabBadge={{tab1BadgeCount}} sin comillas dobles

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

about 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda