ionic2中ts调用js的方法

在ionic2的项目中时常需要在ts文件中调用第三方库或自定义中的js方法或变量，在实践中，我常采用此种方法，与大家共享......

1、第三方库js方式

（1）安装第三方库：npm install XXXXX --save

（2）html和ts中使用：

参考第三方JS的官网，在创建一个对象.

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

在ts中使用

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

    }

    ionViewDidEnter() {
        var canvas = <HTMLCanvasElement> ("myChart");
        var ctx = ("2d");  // 这里是关键, 不能写在constructor()中
        (ctx,{
            data: {......}}}

下面主要讲自定义js的调用，重点：

1）在项目app目录下面写一个.

比如：

内容如下：

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

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

同时还需要做下面两步，先在中增加该js，比如<script src="build/"></script>，最后在需要调用的ts中进行声明如下：

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

其中需要说明的是中声明的变量和方法都是中的类或方法等。

参考博客：

/xiekongxk/article/details/52233031

/cjxhd/p/

秒客网

ionic2中ts调用js的方法

相关文章