在Ionic2 +打字稿中使用正常的JS图书馆
问题描述:
我试图在我的ionic2 +打字稿项目中使用camanjs。在Ionic2 +打字稿中使用正常的JS图书馆
我也看了一下Ionic and Typings blog post by Mike,但它显示了添加库已在分型
后来我发现this blog post from josh on adding goole maps使用CDN方法。
遵循他们两个我已经做了迄今为止以下,
通过CDN添加camanjs到index.html
文件
以下是我的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得到任何编译器错误或者在编译期间,任何帮助将不胜感激。
请注意,而不是使用Camanjs...
尝试与此的my previous question
答
这个扩展/更详细的版本:
Caman('#my-image', function() {
// ...
});
所以仅通过Caman
更换Camanjs
应该让你调用该库中的方法。
嘿@sebaferreras,谢谢你的回复。它确实有效。我更新了'声明var Caman:any;'并开始使用它作为'Caman'。据我所知,声明变量会停止打字稿投诉?还有一件事要澄清(如果可能的话:)),而不是CDN,如果我使用'npm install',我该如何在'.ts'文件中引用JavaScript库?,再次感谢:) – sameera207
很高兴我能帮忙:)是的,像这样声明变量只是为了避免打字稿抱怨不知道那是什么,但在运行时却没有效果。如果你使用npm添加它(亲自我喜欢这种方法比CDN的更多),你需要在'node_modules'内找到文件夹的名字(比如说是camanjs),然后像import'from'camanjs''或者如果你只使用那个,从'camanjs'中输入{Caman}。你可以找到一个例子(使用时刻)[这里](http://ionicframework.com/docs/v2/faq/#adding-third-party-libs) – sebaferreras