Question

我正在试用Ionic，我想做一个货币转换器来练习。该应用程序从API Rest中检索一些数据，然后在前端用于计算一定数量的货币的汇率。我想让它像preev.com一样工作。

我有一个从API Rest获取数据的服务，它有两个参数，即要转换的货币。然后，服务根据参数/货币向正确的端点发出get请求。

在我的页面中，我有一个函数将参数/货币发送到服务，然后订阅它。

在这部分我遇到了两个问题：

第一个是因为是一个可观察的，它经常更新。我试图通过每隔60秒向服务器发出一次间隔请求来解决这个问题，但是它没有用，我试图解决它的另一种方法是尝试使用{{1}在订阅之前从组件中检索一次值。方法。
当我在我的选择组件中的货币之间切换时，first()在当前交换值和过去的交换值之间闪烁。例如，在我的应用程序中交换的默认货币是BTC / CLP，但是当我选择BTC / COP时，它会闪烁两个交换率几秒钟，直到它显示当前的汇率，这是我打算的。最后，当我在没有等待显示当前交易所的情况下切换货币时，它会崩溃。

这是我的代码：

页：

targetAmount

HTML：

export class Page {

  baseCurrency = 'BTC';
  targetCurrency = 'CLP';
  baseAmount = 1;
  exchangeRate: number;
  subscription;

  constructor(public navCtrl: NavController,
    private exchangeService: ExchangeService) {

  }

  supportedCurrencies = ['BTC', 'ETH', 'BCH'];
  supportedCurrencies2 = ['CLP', 'COP', 'PEN'];

  get targetAmount() {
    this.subscription = this.exchangeService.getBudaFiat(this.baseCurrency, this.targetCurrency)
    .first()
    .subscribe(
      val => {
        this.exchangeRate = val.ticker.last_price[0];
      }
    )
    return this.baseAmount * this.exchangeRate;
  }

  ionViewWillLeave() {
    this.subscription.unsubscribe();
    console.log("SALIO");
  }

}

服务：

<ion-content>
  <ion-list>
    <input type="number" [(ngModel)]="baseAmount"
      [class.error]="isInvalid(baseAmount)">
    <currency-select [(selected)]="baseCurrency"></currency-select>
    = <strong>{{targetAmount}}</strong>
    <currency-select2 [(selected)]="targetCurrency"></currency-select2>
    <p *ngIf="isInvalid(baseAmount)">Please enter a valid amount</p>
  </ion-list>
</ion-content>

Stackblitz上的代码也是可用的，您可以在“联系人”选项卡中查看问题：

Stackblitz app link

感谢您的帮助！

修改

抱歉，我忘记提到在我解释的第二个问题中，它开始使用大量内存，直到应用程序冻结。

Answer 1

您需要正确导入订阅：

import {Subscription} from 'rxjs/Subscription';

然后输入您的订阅变量：

subscription: Subscription;

最后

this.subscription.unsubscribe();

Answer 2

我使用的方式非常简洁，您不需要为每个订阅创建变量

使用默认alive

true

在.takeWhile(() => this.alive)

subscribe

实施OnDestroy
在alive

ngOnDestroy

然后自动当您的组件被销毁时，它会取消订阅observable

export class MyComponent implements OnDestroy, OnInit {

  public user: User;
  private alive: boolean = true;

  public ngOnInit() {
    this.userService.authenticate(email, password)
      .takeWhile(() => this.alive)
      .subscribe(user => {
        this.user = user;
      });

    this.otherService.getdata()
      .takeWhile(() => this.alive)
      .subscribe(data => {
      });

  }

  public ngOnDestroy() {
    this.alive = false;
  }

}

您可以在here

Angular Memory泄漏和订阅无法正常工作

2 个答案: