Ionic 2无网络时显示WiFi图标并隐藏仪表盘的实现方法

嘿，我来帮你搞定这个网络检测和UI切换的需求！下面是一步步的解决方案：

第一步：确保Network插件正确安装配置 #

首先得确认你已经装好Network原生插件，如果还没装，先在项目根目录执行这两条命令：

ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

然后打开app.module.ts，把Network添加到providers数组里，这样组件才能正常注入使用这个插件。

第二步：在Dashboard组件中处理网络状态逻辑 #

在你的dashboard.ts文件里，注入Network和Platform（要等平台就绪后再监听网络），然后定义一个变量跟踪网络状态：

import { Component, OnInit } from '@angular/core';
import { Network } from '@ionic-native/network';
import { Platform } from 'ionic-angular';

@Component({
  selector: 'page-dashboard',
  templateUrl: 'dashboard.html',
})
export class DashboardPage implements OnInit {
  isConnected: boolean = true; // 默认假设网络连接正常

  constructor(
    private network: Network,
    private platform: Platform
  ) {}

  ngOnInit() {
    this.platform.ready().then(() => {
      // 初始检测当前网络状态
      this.checkNetworkStatus();

      // 监听网络连接恢复事件
      this.network.onConnect().subscribe(() => {
        // 加个小延迟，确保网络真的稳定连上了
        setTimeout(() => {
          this.isConnected = true;
        }, 300);
      });

      // 监听网络断开事件
      this.network.onDisconnect().subscribe(() => {
        this.isConnected = false;
      });
    });
  }

  // 手动检测网络状态的方法
  checkNetworkStatus() {
    const connectionType = this.network.type;
    // 当网络类型为'none'时判定为无网络，其他情况视为有连接
    this.isConnected = connectionType !== 'none';
  }

  gotomaps() {
    // 保留你原有的点击跳转逻辑
  }
}

第三步：修改dashboard.html模板，实现UI切换 #

接下来修改你的模板，用*ngIf指令来控制仪表盘和WiFi图标的显示隐藏：

<!-- 无网络时显示的WiFi提示区域 -->
<div *ngIf="!isConnected" class="no-network-wrap">
  <ion-icon name="wifi" class="wifi-icon"></ion-icon>
  <p>请检查你的网络连接哦</p>
</div>

<!-- 有网络时显示的仪表盘内容 -->
<ion-grid responsive-sm center *ngIf="isConnected">
  <ion-row style="background-color: #fff;">
    <!-- 保留你原有的仪表盘行内容 -->
  </ion-row>
  <ion-row center>
    <ion-col (click)="gotomaps()">
      <!-- 保留你原有的点击区域内容 -->
    </ion-col>
  </ion-row>
</ion-grid>

可以再加一点CSS美化WiFi提示区域，在dashboard.scss里添加：

.no-network-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;

  .wifi-icon {
    font-size: 80px;
    color: #999;
    margin-bottom: 20px;
  }

  p {
    font-size: 16px;
    color: #666;
  }
}

小提醒 #

• 记得在真机或者模拟器上测试，因为Network是原生插件，浏览器环境下可能无法正常触发网络状态变化事件。
• 如果需要区分WiFi/蜂窝网络等更细致的类型，可以通过this.network.type的值（比如'wifi'、'4g'）来做进一步判断。

内容的提问来源于stack exchange，提问作者Harshal Deshmukh