使用带有Ionic2 +打字稿的普通JS库 [英] Using a normal JS librarary with Ionic2 + typescript

问题描述

我正在尝试将 camanjs 与我的ionic2 +打字稿项目一起使用。

I'm trying to use camanjs with my ionic2 + typescript project.

我还看过迈克的Ionic和Typings博客文章，但它显示添加了一个已经在打字的库

I've also had a look at Ionic and Typings blog post by Mike, however it shows adding a library that is already in Typings

然后我找到了这篇来自josh的关于添加goole地图的博客使用CDN方法。

Then I found this blog post from josh on adding goole maps that uses CDN method.

通过以下两个方式我到目前为止已经完成了以下操作，

By following both of them I've done following so far,

通过CDN将camanjs添加到 index.html file

added camanjs via CDN to the index.html file

#index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<script src="cordova.js"></script>
...

以下是我的ts档案

#home.ts 
import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';

declare var Camanjs: any;

@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {
  }

  addFilter(){
     Camanjs("#image", function(){
       this.sinCity();
       this.render();
     })
  }
}

和我的html文件。 （当用户点击我想要应用过滤器的按钮时）

and my html file. (when the user click the button I want to apply the filter)

#home.html
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button (click)="addFilter()">Filter</button>
  <img id='image' src="https://d339b5nop2tkmp.cloudfront.net/uploads/pet_photos/2016/7/13/469479_e76aa_340x340_af1c8.jpg">
</ion-content>

但是当我点击 addFilter（） I收到以下错误

but when I click addFilter() I'm getting the following error

browser_adapter.js:84 ReferenceError: Camanjs is not defined
    at HomePage.addFilter (home.ts:14)
    at DebugAppView._View_HomePage0._handle_click_13_0 (HomePage.template.js:201)
    at view.js:375
    at dom_renderer.js:254
    at dom_events.js:27
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.js:53)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.runGuarded (zone.js:230)
    at NgZoneImpl.runInnerGuarded (ng_zone_impl.js:86)

这篇关于使用带有Ionic2 +打字稿的普通JS库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！