ionic2中ts调用js的方法

来源：互联网发布：买卖点炒股软件编辑：程序博客网时间：2024/05/16 02:44

在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

0 0