离子导航栏中没有互联网连接时如何显示或隐藏离子图标？

Question

检查互联网连接时如何显示或隐藏离子图标？我对此有点困惑，所以如果你知道如何解决这个问题，请告诉我。谢谢 我已经在 HTML ngIf 函数中设置了这个：

<ion-buttons end>
      <div >
        <ion-icon name="ios-wifi" style="zoom:1.5;" *ngIf="!wifi"></ion-icon>
        </div>
    </ion-buttons>

这是我的网络提供商的 ts 以及在哪里检查它。非常感谢您的一点支持和帮助。 网络.ts

import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network';
import { BehaviorSubject, Observable } from 'rxjs';
import { ToastController, Platform } from 'ionic-angular';

export enum ConnectionStatus {
  Online,
  Offline
}

@Injectable({
  providedIn: 'root'
})
export class NetworkService {

  private status: BehaviorSubject<ConnectionStatus> = new BehaviorSubject(ConnectionStatus.Offline);

  constructor(private network: Network, private toastController: ToastController, private plt: Platform) {
    this.plt.ready().then(() => {

      this.initializeNetworkEvents();
      let status = this.network.type !== 'none' ? ConnectionStatus.Online : ConnectionStatus.Offline;
      this.status.next(status);
    });
  }

  public initializeNetworkEvents() {

    this.network.onDisconnect().subscribe(() => {
      if (this.status.getValue() === ConnectionStatus.Online) {
        console.log('OFFLINE');
        this.updateNetworkStatus(ConnectionStatus.Offline);
      }
    });

    this.network.onConnect().subscribe(() => {
      if (this.status.getValue() === ConnectionStatus.Offline) {
        console.log('ONLINE');
        this.updateNetworkStatus(ConnectionStatus.Online);
      }
    });
  }

  private async updateNetworkStatus(status: ConnectionStatus) {
    this.status.next(status);

    let connection = status == ConnectionStatus.Offline ? 'Internet konekcija prekinuta.' : 'Konekcija uspostavljena';

    this.toastController.create({
      message: `${connection}`,
      duration: 3000,
      position: 'bottom'
    }).present();
  };

  public onNetworkChange(): Observable<ConnectionStatus> {
    return this.status.asObservable();
  }

  public getCurrentNetworkStatus(): ConnectionStatus {
    return this.status.getValue();
  }
}

Answer 1

这样做：

在您的 app.component.ts 中

    import { Network } from '@ionic-native/network/ngx';
    import { Events } from '@ionic/angular';

        constructor(private network: Network, public events: Events,) {
          // watch network for a disconnection
          let disconnectSubscription = this.network.onDisconnect().subscribe(() => {

           console.log('network was disconnected :-(');
           this.events.publish('networkStatus', {status: false}); 
          });

    // watch network for a connection    
    let connectSubscription = this.network.onConnect().subscribe(() => {
      console.log('network connected!');
      this.events.publish('networkStatus', {status: true});
      setTimeout(() => {
        if (this.network.type === 'wifi') {
          console.log('we got a wifi connection, woohoo!');
        }
      }, 3000);
    });

 }

在您的 page.ts 内

constructor(){
   this.events.subscribe('networkStatus', (data) => {
      console.log(data);
      if(data.status == false){
        this.wifi = false;
      }else{
        this.wifi = true;
      }
   });
}