我是Ionic框架的新手。
我正在尝试显示network connection and battery status in my app home page
。截至目前,我们已获得network connection
解决方案。但我们很难显示battery status
有人可以请我提供如何在Ionic 2应用程序中显示设备电池状态吗?我找到了cordovaBatteryStatus
插件https://github.com/apache/cordova-plugin-battery-status。
我已经安装了插件
我的home.html: -
<h2>Battery status: {{batteryStatus}}</h2>
<ion-content class="home" padding>
<button ion-button color="primary" (click)="checkNetwork()" full>Get Nettwork Connection</button>
</ion-content>
我的家。:
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AlertController, Platform} from 'ionic-angular';
import { BatteryStatus } from 'ionic-native';
declare var batteryLevel: any;
declare var navigator: any;
declare var Connection: any;
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
hideTopTab:boolean=true;
x(){
console.log(this.hideTopTab);
this.hideTopTab = !this.hideTopTab;
}
// hideBottomTab:boolean=true;
// y(){
// console.log(this.hideBottomTab);
// this.hideBottomTab = !this.hideBottomTab;
// }
status:any;
constructor(public alert:AlertController , public navCtrl: NavController, public platform: Platform) {
this.platform.ready().then(()=>{
let subscription = BatteryStatus.onChange().subscribe( (status) => {
console.log(status.level, status.isPlugged);
this.status=status.level;
} );
} );
}
onBatteryStatus(info){
alert('battery status: '+info.level+' isPlugged: '+info.isPlugged);
batteryLevel = info.level;
}
checkNetwork() {
this.platform.ready().then(() => {
var networkState = navigator.connection.type;
var states = {};
states[Connection.UNKNOWN] = 'Unknown connection';
states[Connection.ETHERNET] = 'Ethernet connection';
states[Connection.WIFI] = 'WiFi connection';
states[Connection.CELL_2G] = 'Cell 2G connection';
states[Connection.CELL_3G] = 'Cell 3G connection';
states[Connection.CELL_4G] = 'Cell 4G connection';
states[Connection.CELL] = 'Cell generic connection';
states[Connection.NONE] = 'No network connection';
let alert = this.alert.create({
title: "Connection Status",
subTitle: states[networkState],
buttons: ["OK"]
});
alert.present();
});
}
}
以上代码用于显示Battery Status and Device Network connection
。但是Network Connection
正在完美地显示Device Network connection
。
我们几乎尝试显示Device Battery Status and Network Connection
,截至目前我们已获得network connection
解决方案,但现在我们正在努力获得battery status
解决方案....
因此,请您检查我的代码并提供准确的解决方案,我们不知道我们在home.ts and home.html
中犯了哪些错误。提前谢谢你......
答案 0 :(得分:1)
你有错误的想法..你正在为onChange
事件添加一个处理程序。它仅在电池状态改变时才会启动。每次按键点击都可能无法打印。
它所做的就是在每次点击按钮时替换事件监听器
有一个类变量status
在platform.ready()
内的构造函数中订阅并在回调中设置状态变量。
您可以在按钮单击时显示警报状态值。
status:any;
constructor(public alert:AlertController , public navCtrl: NavController, public platform: Platform) {
this.platform.ready().then(()=>{
let subscription = BatteryStatus.onChange().subscribe( (status) => {
console.log(status.level, status.isPlugged);
this.status=status.level;
} );
} );
}
取决于您希望如何显示电池状态,
<h2>Battery status: {{status?.level}}</h2>
<h2>Battery is plugged:{{status?.isPlugged}}</h2>
由于状态是异步设置的,因此使用?
作为undefined
的检查。一旦更改,值就会更新。
答案 1 :(得分:0)
对于网络连接⚡️,您可以使用https://ionicframework.com/docs/v2/native/network/
对于电池状态,您可以使用https://ionicframework.com/docs/v2/native/battery-status/
对于其他诊断⚕️,您可以使用https://ionicframework.com/docs/v2/native/diagnostic/
请注意,插件未绑定到Ionic 2,您也可以在其他Cordova项目中使用它们。