在 Angular2（不是 Ionic）Cordova 应用程序中检查 Internet 连接答案

【问题标题】：Check for Internet connectivity in Angular2 (not Ionic) Cordova app在 Angular2（不是 Ionic）Cordova 应用程序中检查 Internet 连接
【发布时间】：2016-08-30 14:55:10
【问题描述】：

我们创建了一个 Angular2 Cordova（不是 Ionic）应用程序，它可以多次调用后端服务。

如果用户没有连接，我们希望应用显示特定页面（组件）。我们已经构建了所有这些，但是我们如何感知连接性然后显示页面？

该应用程序是用 TypeScript 编写的，我想我可以在 index.ts 文件中添加一些代码来完成此操作，但 index.ts 文件不理解应用程序的导航以允许我更改页面。

我知道我需要 Cordova 网络信息插件，并且我知道如何使用它来检查连接，但缺少的部分是将它连接起来，以便它可以更改页面（路由到适当的组件）。

【问题讨论】：

如何订阅插件online 事件并在事件处理程序中手动路由，如here 中所述？
在服务中避免这样做的原因是什么？
index.ts 应该是什么样子？你试过什么？您是否使用@angular/router 进行路由？错误是什么？您问的是建议而不是解决方案，这就是为什么答案不够令人满意，请添加一些code related information，以便我们提供更好的解决方案
我不确定如何在服务中完成它。我想，我可以，但是我不需要在所有组件中注入该服务吗？我想我是 Angular2 的新手，不知道它是如何工作的。
如果您想在应用启动时检查互联网连接，请在根组件中进行。如果您想在路线更改时检查它，那么您可以订阅router 进行更改，您不必在其他任何地方重复代码。如果您想在http 请求上检查它，那么您将需要一个公共服务，通过该服务所有请求都会发生，您不必在每个http 请求中重复。我为我们的应用实现了最后一个。

标签： cordova angular typescript

【解决方案1】：

安装 Cordova 网络插件后，每秒检查一次：

setInterval(
    function(){
      if(!navigator || !navigator.network) return; //if is undefined

      if(navigator.network.connection.type == Connection.NONE){
            alert("nocon");
        }else{
            alert("yescon");
        }
    }, 1000
);

【讨论】：

问题的最后一段，“我知道我需要 Cordova 网络信息插件，并且我知道如何使用它来检查连接，但缺少的部分是将它连接起来以便它可以更改页面（路由到适当的组件）。”
在模块的 run 方法中使用 $setInterval 而不是 setInterval。在run方法中注入$state，使用$state.go代替alert("nocon");或alert("yescon");
@gianlucatursi 这不是 Angular 1.x 项目。

【解决方案2】：

此插件提供了旧版本 Network Information API 的实现。它提供有关设备的蜂窝和 wifi 连接以及设备是否具有互联网连接的信息。

cordova plugin add cordova-plugin-network-information

这是您的示例

  module.controller('MyCtrl', function($rootScope, $cordovaNetwork) {

      document.addEventListener("deviceready", function () {

        var type = $cordovaNetwork.getNetwork()

        var isOnline = $cordovaNetwork.isOnline()

        var isOffline = $cordovaNetwork.isOffline()


        // listen for Online event
        $rootScope.$on('$cordovaNetwork:online', function(event, networkState){
          var onlineState = networkState;
        })

        // listen for Offline event
        $rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
          var offlineState = networkState;
        })

      }, false);
    });

更多信息请访问参考链接

【讨论】：

一些事情...1。正如我所说，我正在使用 TypeScript。 2. 我正在使用 Angular2。