2016-08-21 5 views
0

Я пытаюсь использовать camanjs с моим проектом ionic2 + typescript.Использование обычного JS-библиотекаря с текстом Ionic2 +

Я также имел взгляд на Ionic and Typings blog post by Mike, однако он показывает добавление библиотеки, которая уже находится в типизации

Тогда я нашел this blog post from josh on adding goole maps, который использует метод CDN.

Следуя им обоим я сделал следующие до сих пор,

добавил camanjs через CDN к 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> 
... 

Ниже подам ц

#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 или во время компиляции любая помощь будет высоко оценена.

Пожалуйста, обратите внимание, это расширенный/более подробную версию my previous question

ответ

1

Вместо использования Camanjs... попробовать с этим:

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

Так замена Camanjs всего на Caman позволит вам вызвать методы этой библиотеки ,

+0

Эй, @sebaferreras, спасибо за ответ. Это сработало. Я обновил 'declare var Caman: any;' и начал использовать его как 'Caman'. Так как я понимаю, объявляя, что переменная перестанет ссылаться на скрипты? Еще одна вещь, чтобы прояснить (если возможно :)) вместо CDN, если я использую 'npm install', как я могу отнести библиотеку javascript в файл' .ts'?, Спасибо еще раз :) – sameera207

+0

Рад, что я мог помочь :) Да, объявляя переменную вроде этого, просто избегайте машинописного текста, жалующегося на то, что не знает, что это такое, но во время выполнения никаких эффектов. Если вы добавите его с помощью npm (лично мне этот подход больше, чем у CDN) вам нужно найти имя папки внутри 'node_modules' (скажем, camanjs) и импортировать ее как' import * from 'camanjs'' или 'import {Caman} из 'camanjs'', если вы используете только это. Вы можете найти пример этого (используя момент) [здесь] (http://ionicframework.com/docs/v2/faq/#adding-third-party-libs) – sebaferreras