Question

我正在尝试将https://ionicframework.com/docs/v2/native/battery-status/合并到我正在使用Ionic v2构建的应用中。

我已按照上述网址中的使用说明操作，这是我的个人资料。

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { BatteryStatus } from 'ionic-native';
import { StatusObject } from 'ionic-native';

@Component({
  selector: 'page-profile',
  templateUrl: 'profile.html'
})
export class ProfilePage {

  public level: number;  
  public isPlugged: boolean;    

  constructor(public navCtrl: NavController) {

    let subscription = BatteryStatus.onChange().subscribe(
        (status: StatusObject) => {
            this.level = status.level;
            this.isPlugged = status.isPlugged;
        }
    );

    subscription.unsubscribe();

  }

}

这适用于离子服务，我已经构建了一个可以在我的iPhone上运行的版本。

在我的模板中，我有：

<ion-header>

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>    
    <ion-title>profile</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

    <p>{{ level }}</p>
    <p>{{ isPlugged }}</p>

</ion-content>

但没有出现。如何实际显示电平以及电话是否已插入？

Answer 1

@Chris，问题似乎出现在你的构造函数中，你正在订阅onChange事件，并且在取消订阅之后。与BehaviourSubject不同，一个Observable - 这是onChange（）返回的 - 只触发一个新值，这意味着你不会从中获取任何值，直到它触发一个新事件，这可能不会发生在这两行代码之间，就像@Jorge提到他的评论一样。

为了解决这个问题，我建议你将取消订阅移动到一个名为ngOnDestroy（）的新函数，这是一个角度函数，可以在组件的销毁时调用。如下所示：

export class ProfilePage {

    public level: number;  
    public isPlugged: boolean;   
    public onChangeSub: Subscription; 

    constructor(public navCtrl: NavController) {

        let subscription = BatteryStatus.onChange().subscribe(
            (status: StatusObject) => {
                this.level = status.level;
                this.isPlugged = status.isPlugged;
            }
        );

    }

    ngOnDestroy() {
        subscription.unsubscribe();
    }

}

这将使您的订阅在组件的生命周期内保持活动状态，从而反映HTML中的更改。

希望有所帮助

使用Ionic 2的Ionic Native API

1 个答案: