渴望装载离子吐司控制器 [英] Eager load an ionic Toast Controller

问题描述

我具有监听互联网连接的功能

I have this function that listen the internet connection

  private verifyNetworkConnection() {
    this.networkService
      .isNetworkConnected
      .pipe(distinctUntilChanged())
      .subscribe(connected => {
        if (connected) {
           // do secret things
        } else {
            this.toast.create({
            message: 'Sem conexão a internet',
            showCloseButton: true,
            duration: 2000,
            cssClass: ToastClasses.ERROR
          }).then((res) => res.present());
          this.disconnectFromServices();
        }
      });
  }

在else块中，我需要显示一个Toast，表明用户没有连接，但是在toast doenst显示中，我读了一些主题，指出ToastController是延迟加载的，并且在没有连接时无法加载，是无论如何都要渴望加载组件以显示何时没有连接??

And in the else block, i need to show a Toast that says the user has no connection, but the toast doenst show, i read some topics saying that the ToastController is lazy loaded and cant load when there is no connection, is there anyway to Eager Load the component to show when there's no connection ??

推荐答案

您可以轻松地这样做:即创建服务

You can easily do it like so: i.e. create a service

network-state.service.ts

import { Injectable } from "@angular/core";
import { Network } from "@ionic-native/network/ngx";
import { Subscription } from "rxjs";
import { ShowToastService } from "./show-toast.service";

@Injectable({
  providedIn: "root"
})
export class NetworkStateService {
  private connectSubscription$: Subscription = null;
  constructor(private network: Network,
    private showToastService: ShowToastService) { }

  WatchConnection() {
    if (this.connectSubscription$) { this.connectSubscription$.unsubscribe(); }
    this.connectSubscription$ = this.network.onDisconnect().subscribe(() => {
      this.showToastService.showToast("Your internet seems to be down! Please check your network settings!",'danger');
      if (this.connectSubscription$) { this.connectSubscription$.unsubscribe(); }
      this.connectSubscription$ = this.network.onConnect().subscribe(() => {
        setTimeout(async() => {
          this.showToastService.toast.dismiss();
          if (this.network.type === "wifi" || this.network.type === "4g" || this.network.type === "3g" || this.network.type === "2g" || this.network.type === "cellular" || this.network.type === "none") {
            this.showToastService.showToast("Internet connection available!",'success');
            this.WatchConnection();
          }
        }, 3000);
      });
    });
  }
}

然后像这样注入它:

app.component.ts

 constructor(private networkStateService: NetworkStateService,){
   this.initializeApp();
}

  async initializeApp() {
    await this.platform.ready();
    this.statusBar.styleDefault();
    this.splashScreen.hide();

    if (this.platform.is("cordova")) {
      this.networkStateService.WatchConnection();
   }
 }

吐司服务是这样的:

show-toast.service.ts

show-toast.service.ts

import { Injectable } from "@angular/core";
import { ToastController, Events } from "@ionic/angular";

@Injectable({
  providedIn: "root"
})
export class ShowToastService {
  toast: HTMLIonToastElement;
  constructor(private toastCtrl: ToastController,
   ) { }

  async showToast(message: string, color: string): Promise<void> {
const toast: HTMLIonToastElement = await this.toastCtrl.create({
  message,
  duration: 3000,
  position: 'bottom',
  color,
  buttons: [
    {
      text: 'Ok',
      handler: () => {
      }
    }
  ]
});
toast.present();
}
}

这篇关于渴望装载离子吐司控制器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！