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

Question

我是 Ionic 2 的初学者。我正在使用网络本机插件开发 网络 Connection/Detection。我想在 没有互联网连接 时显示 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

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

}

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

提供商使用 在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 2

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

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

Answer 3

我已经得到完美的图像 隐藏和显示 w.r.to 互联网连接 使用此代码

导入网络插件

从“@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 4

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

可以使用@ionic-native/network

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

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

ionic-native/network 模块中有一个类似于 onConnect 和 onDisconnect 的函数，但它只会在您 connect/disconnect 来自 phone 的网络时检查当你在应用程序中时。如果有人突然没有/禁用网络连接，使用该功能也许很有用

构造函数：

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 < 5.0.0

的支持版本

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

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

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

Result : if the user open up the page with no internet connection, it's toast up a message

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

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

How to show Image when No internet connection in Ionic 2

ionic-framework

ionic2

ionic3