时间戳

首页 > 解决方案 > 渴望加载一个离子吐司控制器

angular - 渴望加载一个离子吐司控制器

问题描述

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

  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 没有显示，我读到一些主题说 ToastController 是延迟加载的，并且在没有连接时无法加载，无论如何渴望加载组件以在没有连接时显示？？

标签： angulartypescriptionic-frameworkionic4offline

解决方案

您可以像这样轻松地做到这一点：即创建服务

网络状态.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();
   }
 }

Toast 服务是这样的：

显示-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();
}
}

推荐阅读