2016-08-21 7 views
0

私はionic2 + typescriptプロジェクトでを使用しようとしています。通常のJSライブラリーをIonic2 + typescriptで使用する

は私もIonic and Typings blog post by Mikeを見て持っていた、しかし、それはその後、私はCDN方式を使用するthis blog post from josh on adding goole mapsを発見したタイピング

にすでに存在するライブラリを追加することを示しています。私がこれまでに以下の行ってきたそれらの両方に従うことにより

は、

はファイル

​​

後は私の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(); 
    }) 
    } 
} 

と私のファイルであるindex.htmlにCDN経由camanjsを追加しました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()をクリックしたときに、私はIDEを経由して任意のコンパイラエラーを取得いけないしかし、私は次のエラー

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) 

を取得していますコンパイル時には、どんな助けでも大歓迎です。

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

は、だからCamanCamanjsを交換しますが、そのライブラリのメソッドを呼び出すことができるようにする必要があります

代わりにこれを試してくださいCamanjs...を使用してのmy previous question

答えて

1

のこの拡張/より詳細なバージョンに注意してください。

+0

ちょっと@sebaferreras、返信いただきありがとうございます。それはうまくいった。私は 'declare var Caman:any;'を更新し、それを 'Caman'として使い始めました。私が変数を宣言することは、typescriptが文句を言うのを止めることを理解していますか?私が 'npm install'を使用した場合、CDNの代わりにもっと明確にするべきことがあります。どうすれば' .ts'ファイルのjavascriptライブラリを参照できますか?ありがとう、もう一度:) – sameera207

+0

嬉しいです:)はい、そのような変数を宣言するのは、それが何であるかを知らないということについてタイプコピーが不平を言わないようにすることですが、実行時には何の効果もありません。 npm(個人的に私はCDNのものよりもこのアプローチが好きです)を使用して追加する場合、 'node_modules'内のフォルダの名前を見つける必要があります(camanjsとしましょう)、' import * from 'camanjs'あなたがそれを使用すれば、 'camanjs 'から' import {Caman}'を呼び出すことができます。あなたはこれの例を見つけることができます(瞬間を使って)[ここ](http://ionicframework.com/docs/v2/faq/#adding-third-party-libs) – sebaferreras

関連する問題