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

Question

我是 Ionic 2 的初学者。我正在使用网络原生插件进行网络连接/检测。 我想在 没有互联网连接时显示 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

我得到了完美的图像隐藏和显示 w.r.to Internet 连接 使用此代码

导入网络插件

从'@ionic-native/network'导入{网络}；

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

导入'rxjs/add/observable/fromEvent';

把这个放在构造函数之前

hide:boolean = true;

将此代码放在构造函数下

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

我会为你创建NetworkConnectionProvider.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;
    });
  }

}

然后在app.module.ts中注入NetworkConnectionProvider

提供者使用 在dashboard.ts

首先在constructor 中注入private networkCheck:NetworkConnectionProvider 和private eventCtrl: Events。那就听吧。

 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 的回答。您还可以使用 hidden 属性，它不会像 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';
}

ionic-native/network 模块内部有一个类似onConnect 和onDisconnect 的功能，但它只会在您在应用内连接/断开手机网络时检查。如果有人突然没有/禁用网络连接，使用该功能可能很有用

构造函数：

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();
}

并注意在 ionic 3.. 中支持的 @ionic-native/network 版本

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

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

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

结果：如果用户在没有互联网连接的情况下打开页面， 这是一条消息

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