ionic2中ts調用js的方法

在ionic2的項目中時常需要在ts文件中調用第三方庫或自定義中的js方法或變量，在實踐中，我常採用此種方法，與大家共享......

1、第三方庫js方式

（1）安裝第三方庫：npm install XXXXX --save

（2）html和ts中使用：

參考第三方JS的官網，在xxx.html創建一個對象.

<ion-content padding class="about">  
    <canvas id="myChart" width="400" height="400"></canvas> 
</ion-content>

在ts中使用

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import * as ChartJs from 'chart.js'; // 導入chart.js
@Component({
    templateUrl: 'build/pages/about/about.html'
})
export class AboutPage {
    constructor(private navController:NavController) {

    }

    ionViewDidEnter() {
        var canvas = <HTMLCanvasElement> document.getElementById("myChart");
        var ctx = canvas.getContext("2d");  // 這裏是關鍵, 不能寫在constructor()中
        ChartJs.Line(ctx,{
            data: {......}}}

下面主要講自定義js的調用，重點：

1）在項目app目錄下面寫一個.d.ts

比如：

內容如下：

declare var websocket: any;
declare var Device: any;
declare var Lamp: any;
declare var lampObject: any;

js文件放到www目錄下的build目錄：

同時還需要做下面兩步，先在index.html中增加該js，比如<script src="build/websocket.js"></script>，最後在需要調用的ts中進行聲明如下：

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

其中需要說明的是websocket.d.ts中聲明的變量和方法都是websocket.js中的類或方法等。

參考博客：

http://blog.csdn.net/xiekongxk/article/details/52233031

http://www.cnblogs.com/cjxhd/p/5777203.html