angular – 来自可观察的@ ionic-native / network值捕获

发布时间：2020-12-17 17:32:59 所属栏目：安全来源：网络整理

导读：我使用@ ionic-native / network和cordova-plugin-network-information插件来检查在线离线状态.但是我在更新网络状态时遇到了困难. home.ts import { Network } from '@ionic-native/network';@Component({ selector: 'page-home',templateUrl: 'home.html'}

我使用@ ionic-native / network和cordova-plugin-network-information插件来检查在线离线状态.但是我在更新网络状态时遇到了困难.

home.ts

import { Network } from '@ionic-native/network';

@Component({
  selector: 'page-home',templateUrl: 'home.html'
})
export class HomePage {
public online:boolean=false;
  constructor(public navCtrl: NavController,private network: Network) {
      this.network.onDisconnect().subscribe(() => {
         this.online=false;
         console.log(this.online);      });
      this.network.onConnect().subscribe(() => {
          this.online=true;
        console.log(this.online);
      });
  }

}

home.html的

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>{{online}}</h1>
</ion-content>

但是在运行应用程序时,它只显示false,但是每当我切换wifi时,console.log(this.online)都会显示true-false更改.有关如何使界面值更改的任何建议.

Chrome Inspect output

解决方法

如果由于某种原因在模板中没有发生更改检测,请尝试使用 ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

constructor(private ref: ChangeDetectorRef) { }

  this.network.onDisconnect().subscribe(() => {
     this.online = false;
     console.log(this.online);  
     this.ref.detectChanges(); // run    
  });
  this.network.onConnect().subscribe(() => {
      this.online=true;
      console.log(this.online);
      this.ref.detectChanges(); // run
  });
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!