javascript - Uppdatera flikmärke dynamiskt i Ionic 2

Jag vill uppdatera värdet på en badge dynamiskt när jag klickar på en knapp.

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

produkt.html

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

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

Som jag trodde, let cartCount=1; gör ingenting. Jag har letat efter en lösning, men de flesta av dem är för Ionic 1 eller AngularJS, vilket inte hjälpte mig alls.

Svar #1

Du kan använda Ionic-händelser för det. Vänligen ta en titt på denna fungerande plunker. Som du kan se där, publicerar vi i den första fliken en händelse när märket behöver uppdateras:

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

}

Och sedan prenumererar vi på det evenemanget på sidan som innehåller båda flikarna:

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

}

Och i vyn:

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

Observera också att egenskapsbindning bör användas istället för stränginterpolering för att binda tabBadge-egenskapen: [tabBadge]="cartCount"

UPPDATERING

Precis som @skinny_jones nämnde i kommentarerna, kan du också använda Subjects/Observables för att uppnå samma resultat. Du kan hitta mer information i detta blogginlägg

Relaterade artiklar