如何在Ionic 2中没有互联网连接时显示图像

Question

我是Ionic 2的初学者。我正在使用网络本机插件进行网络连接/检测。我想在没有Internet连接的情况下显示wifi符号图像示例。

我想在没有互联网连接的情况下隐藏这个仪表板，并且需要显示上面图像的wifi图像符号

这是我的dashboard.html代码

<ion-grid responsive-sm  center >
        <ion-row style="background-color: #fff;">
           </ion-row>
     <ion-row  center>
        <ion-col  (click)="gotomaps()">  <ion-fab  >
            <button ion-fab  >  <img  src="assets/icon/location.png"/>  </button>
            <ion-grid text-center> 
            <label  style="font-size: 15px; font-family:inherit; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Mapping</label>
          </ion-grid>
          </ion-fab> 
        </ion-col>

        <ion-col width-50  center (click)="gotosendmanager()"> <ion-fab  >
            <button ion-fab  > <img  src="assets/icon/folder.png"/> </button>
            <ion-grid text-center> 
            <label style="font-size: 15px; font-family: arial; text-align:center;margin:8px;color:#A62C23;font-weight: bold"> Send manager</label>
          </ion-grid>
          </ion-fab> 
        </ion-col>
      </ion-row>

      <div class="or-label" text-center hidden>
          <img alt="Logo"  src="assets/imgs/wifi.png" >
      </div>  

      <ion-row >
          <ion-col width-50 (click)="gototabs()"> <ion-fab  >
              <button ion-fab  > <img  src="assets/icon/question.png"/> </button>
              <ion-grid text-center> 
              <label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Help</label>
            </ion-grid>
            </ion-fab> 
          </ion-col>

          <ion-col width-50 (click)="exit()"> <ion-fab  >
              <button ion-fab  > <img  src="assets/icon/logout.png"/> </button>
              <ion-grid text-center> 
              <label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Exit</label>
            </ion-grid>
            </ion-fab> 
          </ion-col>
      </ion-row>

      <ion-row style="background-color: #fff;">



      </ion-row>

    </ion-grid>

Answer 1

我已经获得了完美的图像隐藏，并通过此代码显示互联网连接

导入网络插件

从'@ ionic-native / network'导入{Network};

从'rxjs / Observable'导入{Observable};

import'rxjs / add / observable / fromEvent';

把它放在构造函数之前

hide:boolean = true;

将此代码放在Constructor下

var offline = Observable.fromEvent(document, "offline");
    var online = Observable.fromEvent(document, "online");

    offline.subscribe(() => {
      this.hide =false;

    });

    online.subscribe(()=>{
      this.hide =true;

    });

把它放在html文件下

<div class="or-label" text-center *ngIf="!hide" >
          <img alt="Logo"  src="assets/imgs/wifi.png" >
      </div> 

//结果：当您的设备互联网不可用时，可以看到wifi图像，反之亦然。

Answer 2

我将为youNetworkConnectionProvider.ts提供听力网络活动。

import {Injectable} from '@angular/core';
import {Platform, ToastController, Events} from "ionic-angular";
import {Network} from "@ionic-native/network";

export enum ConnectionStatusEnum {
  Online,
  Offline
}

@Injectable()
export class NetworkConnectionProvider {

  public isOnline: boolean = true;
  private previousStatus;
  constructor(private network: Network,
              private  platform:Platform,
              private toastCtrl: ToastController,
              private eventCtrl: Events) {

    this.platform.ready().then(() => {
      this.previousStatus = ConnectionStatusEnum.Online;
      this.initializeNetworkEvents();
    });

  }

  public initializeNetworkEvents(): void {

    this.network.onDisconnect().subscribe(() => {
      if (this.previousStatus === ConnectionStatusEnum.Online) {
        this.eventCtrl.publish('network:offline');

      }
      this.previousStatus = ConnectionStatusEnum.Offline;
      this.isOnline = false;
    });

    this.network.onConnect().subscribe(() => {
      if (this.previousStatus === ConnectionStatusEnum.Offline) {
        this.eventCtrl.publish('network:online');

      }
      this.previousStatus = ConnectionStatusEnum.Online;
      this.isOnline = true;
    });
  }

}

然后在NetworkConnectionProvider注入app.module.ts

提供者在dashboard.ts使用

首先在private networkCheck:NetworkConnectionProvider注入private eventCtrl: Events和constructor。然后听。

 flag:boolean=false;

  this.eventCtrl.subscribe('network:online', () => {
    // online action 
    this.flag =true;
  });

  this.eventCtrl.subscribe('network:offline', () => {
   // offline action 
   this.flag =false;
  });

在dashboard.html需要修改

<ion-grid responsive-sm  center >
        <ion-row style="background-color: #fff;">
           </ion-row>
     <ion-row  center *ngIf="flag">
        <ion-col  (click)="gotomaps()">  <ion-fab  >
            <button ion-fab  >  <img  src="assets/icon/location.png"/>  </button>
            <ion-grid text-center> 
            <label  style="font-size: 15px; font-family:inherit; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Mapping</label>
          </ion-grid>
          </ion-fab> 
        </ion-col>

        <ion-col width-50  center (click)="gotosendmanager()"> <ion-fab  >
            <button ion-fab  > <img  src="assets/icon/folder.png"/> </button>
            <ion-grid text-center> 
            <label style="font-size: 15px; font-family: arial; text-align:center;margin:8px;color:#A62C23;font-weight: bold"> Send manager</label>
          </ion-grid>
          </ion-fab> 
        </ion-col>
      </ion-row>

      <div class="or-label" text-center *ngIf="!flag">
          <img alt="Logo"  src="assets/imgs/wifi.png" >
      </div>  

      <ion-row *ngIf="flag">
          <ion-col width-50 (click)="gototabs()"> <ion-fab  >
              <button ion-fab  > <img  src="assets/icon/question.png"/> </button>
              <ion-grid text-center> 
              <label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Help</label>
            </ion-grid>
            </ion-fab> 
          </ion-col>

          <ion-col width-50 (click)="exit()"> <ion-fab  >
              <button ion-fab  > <img  src="assets/icon/logout.png"/> </button>
              <ion-grid text-center> 
              <label style="font-size: 15px; font-family: arial; text-align:center ;margin:8px;color:#A62C23;font-weight: bold"> Exit</label>
            </ion-grid>
            </ion-fab> 
          </ion-col>
      </ion-row>

      <ion-row style="background-color: #fff;">



      </ion-row>

    </ion-grid>

Answer 3

关注@Utpaul回答。您还可以使用隐藏属性，该属性不会像ngIf那样从Dom中删除您的元素。

<ion-grid responsive-sm  center [hidden]="flag" >

Answer 4

也许这个概念可以帮助你..

您可以使用@ ionic-native / network

检查设备内的当前网络连接

isConnected(): boolean {
    let conntype = this.network.type;
    return conntype && conntype !== 'unknown' && conntype !== 'none';
}

在onConnect模块中有一个像onDisconnect和ionic-native/network这样的函数，但只有当你在应用程序中时，它才会检查你的手机连接/断开网络的时间。如果某人突然没有/禁用网络连接，那么使用该功能可能很有用

构造函数：

constructor(private network: Network, private toast: ToastController) { }

简单地放入构造函数中

if(!this.isConnected()) {
    this.openToast(this.isConnected());
}

简单地放在页面的构造函数中，这就是我们在页面加载后自动检查网络连接的方法

openToast（）函数

openToast(isConnected: boolean) {
    let networkType = this.network.type;
    this.toast.create({
      message: `Network type: ${networkType} and ${isConnected}`,
      duration: 3000
    }).present();
}

并注意在离子3 ..支持的版本@ionic-native/network <5.0.0

我在Ionic 3上测试过可以使用4.6.0版本

这是我们宣布import { Network } from '@ionic-native/network/index';的方式

更多信息：https://www.npmjs.com/package/@ionic-native/network

结果：如果用户打开没有互联网连接的页面，则会播放一条消息

我希望有人能找到这个有用的信息