Ionic 3 Angular中如何在RestProvider外部引用getBalance()内的balance值

Hey there! Let's work through how to access that balance value from your getBalance() function in the RestProvider outside of the function itself. Since we're dealing with Ionic 3 and Angular, here are a few practical, battle-tested approaches:

1. Return an Observable/Promise from getBalance() #

This is the most common approach, especially since getBalance() likely makes an asynchronous API call to fetch the balance. By returning an observable, you can subscribe to it wherever you need the value.

In your RestProvider:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class RestProvider {

  constructor(public http: HttpClient) {}

  getBalance(): Observable<number> {
    // Replace with your actual API endpoint
    return this.http.get<number>('https://your-api-url.com/user/balance')
      .map(fetchedBalance => {
        // Optional: Store the value internally if you need it in other provider methods
        // this.internalBalance = fetchedBalance;
        return fetchedBalance;
      });
  }
}

Then in your component/page where you need the Timer value:

import { RestProvider } from '../providers/rest/rest';

@Component({
  selector: 'page-timer',
  templateUrl: 'timer.html'
})
export class TimerPage {
  timerValue: number;

  constructor(public restProvider: RestProvider) {
    // Fetch the balance and assign it to your Timer value
    this.restProvider.getBalance().subscribe(balance => {
      this.timerValue = balance;
      // Now you can use this.timerValue to initialize your Timer
    }, error => {
      console.error('Oops, failed to fetch balance:', error);
    });
  }
}

2. Store balance as a Public Class Property #

If you need to reuse the balance across multiple methods in the provider, or access it directly from components, you can store it as a class property and update it inside getBalance().

In your RestProvider:

@Injectable()
export class RestProvider {
  public balance: number; // Expose as public, or use a getter for better encapsulation

  constructor(public http: HttpClient) {}

  getBalance(): Observable<number> {
    return this.http.get<number>('https://your-api-url.com/user/balance')
      .map(fetchedBalance => {
        this.balance = fetchedBalance; // Update the class property
        return fetchedBalance;
      });
  }
}

In your component, make sure to wait for the async call to complete before accessing the property:

export class TimerPage {
  timerValue: number;

  constructor(public restProvider: RestProvider) {
    this.restProvider.getBalance().subscribe(() => {
      // Only access the property after the API call resolves
      this.timerValue = this.restProvider.balance;
    });
  }
}

⚠️ Heads up: Don't try to access this.restProvider.balance immediately in the constructor without waiting for the subscription callback—you'll get undefined since the API call is asynchronous.

3. Use a Subject for Real-Time Balance Updates #

If your balance might change while the app is running (e.g., after a transaction), using an RxJS Subject will let all subscribed components automatically receive updates.

In your RestProvider:

import { Subject } from 'rxjs/Subject';

@Injectable()
export class RestProvider {
  private balanceSubject = new Subject<number>();
  public balance$ = this.balanceSubject.asObservable(); // Expose observable to components

  constructor(public http: HttpClient) {}

  getBalance(): void {
    this.http.get<number>('https://your-api-url.com/user/balance')
      .subscribe(balance => {
        this.balanceSubject.next(balance); // Send the new balance to subscribers
      }, error => {
        console.error('Failed to fetch balance:', error);
      });
  }

  // Example method to update balance later (e.g., after a transaction)
  updateBalance(newBalance: number): void {
    this.balanceSubject.next(newBalance);
  }
}

In your component:

export class TimerPage {
  timerValue: number;

  constructor(public restProvider: RestProvider) {
    // Subscribe to balance updates
    this.restProvider.balance$.subscribe(balance => {
      this.timerValue = balance;
      // Your Timer will automatically update whenever the balance changes
    });

    // Trigger the initial balance fetch
    this.restProvider.getBalance();
  }
}

内容的提问来源于stack exchange，提问作者Rashid Haddadin