Question

我正在将ionic5与电容器版本2.2.0一起使用。我正在使用电容器网络来检测网络是在线还是离线。但是Network.getStatus（）返回“ Zone Aware Promise”。下面是我尝试过的代码。

网络服务

Laravel/Vue

由于电容器插件返回了promise，所以我使用的是“ then”，它在获得网络状态后执行。我在下面的拦截器中调用此方法，但出现“区域感知承诺”。

Http拦截器

import { Injectable, OnDestroy } from '@angular/core';
//import { Network } from '@ionic-native/network/ngx';
import { ErrorNotificationService } from '../service/error-notification.service';
import { errorMessages } from '../service/dao/errorMessageConstants';
import { TranslateConfigService } from './translate-config.service';
import { Plugins,NetworkStatus, PluginListenerHandle } from '@capacitor/core';
const { Network } = Plugins;
@Injectable({
  providedIn: 'root'
})
export class NetworkService  {
  networkStatus: NetworkStatus;
  networkListener: PluginListenerHandle;

  constructor(private errorService:ErrorNotificationService) {
    this.listenToInternet();
  }
  

  listenToInternet(){
    this.networkListener = Network.addListener('networkStatusChange', (status) => {
      console.log("Network status changed", status);
      if(status && !status.connected){
        this.errorService.showTextErrorAlert(this.translateService.getTranslatedValue("messages.no_connection"))
      }
      this.networkStatus = status;
   });
  }

   checkNetworkPresent(){
    return Network.getStatus().then(network =>{
      console.log(network,"network as service")
     return network;
    })
  }
}

我在哪里出错了？

Answer 1

当我们要求Angular执行某些不在“ Angular Zone”中的事件/任务时，就会创建区域意识问题，所有这些都是为了确保我们对应用程序拥有完全控制。

首先，NgZone本身是一件非常复杂的事情。我建议您签出this。您可以使用Javascript创建自己的区域。

回到您的问题。

所以现在发生的是对networkStatus插件的调用被阻止了，因为它是在NgZone之外执行的。

要解决您的问题，您需要：

在您的NetworkService中注入ngZone。
根据您的用例，用run()或runTask()方法包装代码。

因此，您需要执行以下操作：

@Injectable({
  providedIn: 'root'
})
export class NetworkService  {
  networkStatus: NetworkStatus;
  networkListener: PluginListenerHandle;

  constructor(
    private errorService:ErrorNotificationService,
    private ngZone: NgZone       // <~ 1. Inject ngZone 
   ) {
    this.listenToInternet();
  }
  

  listenToInternet(){
    this.networkListener = Network.addListener('networkStatusChange', (status) => {
      console.log("Network status changed", status);
      if(status && !status.connected){
        this.errorService.showTextErrorAlert(this.translateService.getTranslatedValue("messages.no_connection"))
      }
      this.networkStatus = status;
   });
  }

   checkNetworkPresent(){
    // 2. Wrap your code with `run` or `runTask` depending on your usecase
    this.ngZone.runTask(() => {
      return Network.getStatus().then(network =>{
      console.log(network,"network as service")
      return network;
    });
   });
  }
}

我希望这会对您有所帮助。

快乐的编码。

如何解决Ionic中的区域感知承诺

1 个答案: