使用Angular 2的Cordova应用程序

1)创建了一个角度项目

(可选)我使用angular IDE创建角度项目

2)在angular project html文件中添加了对cordova.js文件引用的引用.

<script type="text/javascript" src="cordova.js"></script>

3)创建一个cordova项目

4)为cordova项目添加了平台和插件.

对于我的情况,我添加了浏览器平台和cordova设备插件.

5)在角度项目中实现了OnIt并添加了插件回调函数如下.

注意：在’onDeviceReady’之后调用cordova插件很重要

import { Component,OnInit} from '@angular/core';

    @Component({
        selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit{

    ngOnInit() {
        document.addEventListener("deviceready",onDeviceReady,false);
        function onDeviceReady() {
           alert(device.platform);
        }
    }

    }

6)Typescript没有识别’device.platform’并警告找不到设备

要解决此问题,请添加“declare var device;”行

添加上面的我的AppComponent.ts文件如下所示,

import { Component,OnInit} from '@angular/core';

declare var device;

@Component({
    selector: 'app-root',styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{

ngOnInit() {
    document.addEventListener("deviceready",false);
        function onDeviceReady() {
           alert(device.platform);
        }
}

}

7)构建角度项目并将构建文件复制到cordova / www文件夹中

我正在使用脚本将文件从angular项目复制到cordova. Tutorial here

8)准备并运行cordova项目.

对于我的情况,我在浏览器中运行了cordova项目并获得了值为’Browser’的警报