我有这个代码显示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 })更多推荐
badge,number,tabBadge,import,click,电脑培训,计算机培训,IT培训"/> <meta name=
发布评论