Question

我有这个代码显示tabBadge编号

<ion-tabs selectedIndex="{{activeTab}}">
    <ion-tab [root]="tabThongBaoPage" tabIcon="notifications" [tabBadge]="badge.getBadge()" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>

和服务控制器的行李号

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import CONST from '../variable';
@Injectable()
export class BadgeSinhService {
    badge: number = 0;
    constructor() {
    }
    getBadge(): number {
        return this.badge;
    }
    setBadge(badge): number {
        this.badge = badge;
        return this.badge;
    }
    incrementBadge() {
        this.badge++
        return
    }
    decreaseBadge() {
        if (this.badge > 0) {
            this.badge--
        }
        return;
    }
}

如果我点击这个事件的按钮

<button ion-button (click)="cong()">Cong</button>
<button ion-button (click)="tru()">Tru</button>

cong() {
      this.badge.incrementBadge()
  }
tru() {
    this.badge.decreaseBadge()
  }

单击按钮并点击事件触发后，视图上的tabBadge编号已更新

但我也有这个等待通知事件的代码，当服务器向应用程序发送通知时会触发，它会增加标签徽章编号

 push.on('notification', (data) => {
        console.log('notifi updatei');
        this.badge.incrementBadge();
      })

它会增加标签徽章编号，但视图不会更新，只有当我点击标签时，徽章编号才会在视图上更新

为什么不像点击事件那样更新视图？

Answer 1

我找到了答案，使用ngZone来notifi angular2来更新视图

push.on('notification', (data) => {
        console.log('notifi updatei');
        this.badge.incrementBadge();
      })

上面的代码不会在角度2区域中创建异步任务，可能是因为push.on不属于角度2

但答案是

this.zone.run(() => {
 // increment badge
})

Ionic 2选项卡视图在模型更改时不更新tabBadge，但仅在单击选项卡

1 个答案: