使用带有 Ionic2 + 打字稿的普通 JS 库

Question

我正在尝试将 camanjs 用于我的 ionic2 + typescript 项目。

我也看过 Ionic and Typings blog post by Mike，但是它显示添加的库已经在 Typings

中

然后我发现this blog post from josh on adding goole maps使用CDN方式。

到目前为止我已经关注了他们两个，

通过 CDN 将 camanjs 添加到 index.html 文件

#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 文件。（当用户点击我要应用过滤器的按钮时）

#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() 时出现以下错误

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)

但是我没有通过 IDE 或在编译时收到任何编译器错误，我们将不胜感激。

请注意这是

的扩展/更详细版本

Answer 1

而不是使用 Camanjs... 试试这个：

Caman('#my-image', function () {
  // ...
});

因此仅用 Caman 替换 Camanjs 应该允许您调用该库上的方法。

使用带有 Ionic2 + 打字稿的普通 JS 库

Using a normal JS librarary with Ionic2 + typescript

camanjs

ionic2

angular