Question

如果收到通知，我会尝试更改徽章的价值，但如果您有任何想法可以帮助我，我不会来交换。

tabs.ts

public class Response {

private List<MetricsBean> metrics;

public List<MetricsBean> getMetrics() {
    return metrics;
}

public void setMetrics(List<MetricsBean> metrics) {
    this.metrics = metrics;
}

public static class MetricsBean {
    /**
     * metric : {"type":1,"name":"slide-11-start","value":"1287249598295","sessionID":""}
     */

    private MetricBean metric;

    public MetricBean getMetric() {
        return metric;
    }

    public void setMetric(MetricBean metric) {
        this.metric = metric;
    }

    public static class MetricBean {
        /**
         * type : 1
         * name : slide-11-start
         * value : 1287249598295
         * sessionID :
         */

        private int type;
        private String name;
        private String value;
        private String sessionID;

        public int getType() {
            return type;
        }

        public void setType(int type) {
            this.type = type;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getValue() {
            return value;
        }

        public void setValue(String value) {
            this.value = value;
        }

        public String getSessionID() {
            return sessionID;
        }

        public void setSessionID(String sessionID) {
            this.sessionID = sessionID;
        }
    }
  }
}

tabs.html

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);  





    }
  });

        });




}

实际上我设法检索通知并增加变量num并将其放在变量home中，但徽章的值不会改变

Answer 1

根据您的标签示例，这应该有效：

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

使用简单的控制器：

export class TabsPage  {

  tab1Root: any = SomePage;
  tab1BadgeCount : number = 0; // default 0

  constructor() {

  }

  incrementBadgeCount(){
      this.tab1BadgeCount = this.tab1BadgeCount+1;
  }

  decrementBadgeCount(){
    this.tab1BadgeCount = this.tab1BadgeCount-1;
  }

}

您可以将这些方法挂钩到按钮进行测试。

但是，我建议使用Events来控制徽章数量的更改，例如

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();
  }
}

Answer 2

正如您在docs tabBadge 中看到的那样，它不是输入属性，而是属性。所以应该使用如下

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

更新：

由于您在构造函数中分配值，因此在更改时将无法获取更新的值。我需要更多信息来解决这个问题。另一种方法是使用超时功能，以便每隔60秒检查一次最新值，如下所示

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);

这将订阅该服务并更新您的通知计数。

Answer 3

没有双引号的

tabBadge={{tab1BadgeCount}}

并在ts文件中使用该参数。

离子2如何在标签中增加徽章

3 个答案: