Ionic 2选项卡视图在模型更改时不更新tabBadge，但仅在单击选项卡时更新(Ionic 2 Tab view not update tabBadge when model change but

Ionic 2选项卡视图在模型更改时不更新tabBadge，但仅在单击选项卡时更新(Ionic 2 Tab view not update tabBadge when model change but only update when click on the tab)

我有这个代码显示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(); })

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

为什么它不像click事件那样更新视图？

I have this code that show the tabBadge number

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

and the service controller the bag number

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

If I click on the button with event like this

<button ion-button (click)="cong()">Cong</button> <button ion-button (click)="tru()">Tru</button> cong() { this.badge.incrementBadge() } tru() { this.badge.decreaseBadge() }

The tabBadge number updated on the view, as soon as the button is click and the click event is fire

But I also have this code that wait for notification event, that will be fire when the server send a notification to the app, it will increment the tab badge number

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

It does increment the tab badge number but the view is not update, only when I tap on the tab then the badge number will update on the view

Why it not update the view like the click event ?

最满意答案

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

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

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

但答案是

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

I found the answer,use ngZone to notifi angular2 to update the view

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

somehow the code above not create a async task in angular 2 zone, maybe because push.on not belong to angular 2

but the answer is

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