Использование Ionic Native API с Ionic 2

Question

Я пытаюсь включить https://ionicframework.com/docs/v2/native/battery-status/ в приложение, которое я создаю с помощью Ionic v2.

Я следовал инструкции по использованию из выше URL и вот мой profile.ts:

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

@ Крис, проблемы, кажется, в вашем конструкторе, вы подписываетесь на событие 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.

Надеюсь, это поможет