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'导入{Network};

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

import'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;
    });
  }

}

然后在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中删除您的元素。

MultipartRequest multi = new MultipartRequest(request, PATH, 10 * 1024 * 1024);

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

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

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

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

4 个答案: