在Ionic 2

Question

当我点击按钮时，我希望动态更新徽章值。

tabs.html

...
        <ion-tab [root]="tab1Root" tabTitle="Product" tabIcon="search"></ion-tab>
        <ion-tab [root]="tab2Root" tabTitle="Cart" tabIcon="cart" tabBadge="{{cartCount}}" tabBadgeStyle="danger"></ion-tab>
...

tabs.ts

export class TabsPage {
...
    cartCount = 0;

    tab1Root = ProductPage;
    tab2Root = CartPage;
...
}

product.html

<button ion-button full (click)="updateCart('add', p.id)">Buy Now</button>

product.ts

export class ProductPage {
...
    updateCart(action, id) {
        let cartCount = 1;

        let alert = this.alertCtrl.create({
            title: 'Success!',
            subTitle: 'You have added 1 product to the cart.',
            buttons: ['OK']
        });

        alert.present();
    }
...
}

正如我所说，let cartCount = 1;什么也没做。我已经找到了一个解决方案，但大多数都是针对Ionic 1或AngularJS，它根本没有帮助我。

Answer 1

您可以使用Ionic events。请查看 this working plunker 。就像你可以看到的那样，在第一个标签中我们发布了一个需要更新徽章的事件：

2

然后我们在包含两个标签的页面中订阅该事件：

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({..})
export class FirstTabPage {

  private count: number = 0;

  constructor(public events: Events) {}

  public updateTabBadge(): void {
    this.events.publish('cart:updated', ++this.count);
  }

}

在视图中：

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({...})
export class FirstTabPage {

  private count: number = 0;

  constructor(public events: Events) {}

  public updateTabBadge(): void {
    this.events.publish('cart:updated', ++this.count);
  }

}

请注意，应使用属性绑定代替字符串插值来绑定<ion-header> <ion-navbar> <ion-title>Tabs</ion-title> </ion-navbar> </ion-header> <ion-tabs #myTabs> <ion-tab [root]="tab1Root" tabTitle="First Tab"></ion-tab> <ion-tab [root]="tab2Root" tabTitle="Second Tab" [tabBadge]="cartCount"></ion-tab> </ion-tabs> 属性：tabBadge

<强>更新

就像评论中提到的@skinny_jones一样，您也可以使用[tabBadge]="cartCount" / Subjects来获得相同的结果。您可以在 this blog post

中找到更多信息