Ionic 2 Cordova 网络信息插件参考错误答案

【问题标题】：Ionic 2 Cordova network information plugin reference errorIonic 2 Cordova 网络信息插件参考错误
【发布时间】：2016-06-09 16:52:23
【问题描述】：

我已按照本教程将网络信息插件安装到我的 Ionic 2 应用程序中：

Ionic 2 | How to Work With Cordova Plugins

但是，TypeScript 无法编译，因为它在 states 数组行中找不到“Connection”的引用。知道如何根据平台、页面等为其编写导入语句吗？

我的班级：

import {NavController, NavParams} from 'ionic-framework/ionic';
import {Page, ViewController, Platform, Alert, Modal, Events} from 'ionic-framework/ionic';
import {forwardRef} from 'angular2/core';
import {OnInit} from 'angular2/core';
import {Injectable} from 'angular2/core';
import {TodosService} from '../../services/TodosService';
import {MyTodosItem} from '../../pages/my-todos-item/my-todos-item';

@Page({
  templateUrl: 'build/pages/my-todos/my-todos.html'
})
class TodayPage {

  constructor(
    private platform: Platform,
    private nav: NavController,
    private _events: Events,
    private _todosService: TodosService) {
    this._platform = platform;
    this._isAndroid = platform.is('android');
  }

  ngOnInit() {
    this.getItems();
    this._events.subscribe('item:updated', () => {
      this.getItems();
    });

    this.checkNetwork();
  }

  checkNetwork() {
      this._platform.ready().then(() => {
          var networkState = navigator.connection.type;

          var states = {};
          states[Connection.UNKNOWN]  = 'Unknown connection';
          states[Connection.ETHERNET] = 'Ethernet connection';
          states[Connection.WIFI]     = 'WiFi connection';
          states[Connection.CELL_2G]  = 'Cell 2G connection';
          states[Connection.CELL_3G]  = 'Cell 3G connection';
          states[Connection.CELL_4G]  = 'Cell 4G connection';
          states[Connection.CELL]     = 'Cell generic connection';
          states[Connection.NONE]     = 'No network connection';

          alert(states[networkState]);
      });
  }
.. 
}

错误是：
找不到名称“连接”。

【问题讨论】：

标签： reference angular cordova-plugins ionic2

【解决方案1】：

注意：插件不一定/总是在浏览器中工作，因此请使用真实设备或模拟器。

修复 TypeScript 错误：

在 /app 中创建一个名为 Typings 的文件夹
将此文件下载到该文件夹：phonegaptypings here
在文件夹中创建另一个文件，例如ngcordova.d.ts 使用以下代码：

界面窗口{ 插件：任何； }

然后修改你的 tsconfig.json files 属性：

  "files": [
    "app/app.ts",
    "app/typings/ngcordova.d.ts",
    "app/typings/phonegap.d.ts"
  ]

现在，TypeScript 不应该抱怨，它会构建，但重要的是：在真实设备或模拟器上测试，而不是在浏览器上测试。

这对我有用。

【讨论】：

【解决方案2】：

您应该在导入行下添加以下内容

declare var navigator: any; declare var Connection: any;

【讨论】：

【解决方案3】：

终于找到解决办法了

在 typings/main.d.ts 中添加以下内容以获取网络信息以正常工作

/// <reference path="ngcordova.d.ts" />

/// <reference path="phonegap.d.ts" />

这将适用于最新版本的 angular

【讨论】：

【解决方案4】：

您是否尝试在目标设备上运行它？许多插件在浏览器中无法正常工作（开箱即用）。

【讨论】：