Как я могу использовать сторонние JQuery плагины в угловых? - PullRequest
Новая
       22

Как я могу использовать сторонние JQuery плагины в угловых?

0 голосов
/ 23 декабря 2018

Я пытаюсь использовать плагин smooth_zoom в угловом приложении.(http://vectorflower.com/preview/smooth_zoom/index.html). он использует пользовательские атрибуты html, но кажется, что эти атрибуты не работают в angular. Как я могу использовать эту библиотеку и другие подобные библиотеки в angular 6? Я добавил jquery и smooth_zoom.min.js в "angular"Путь к сценарию .json "вот мой код: homepage.html: 

<div class="zoomHolder">
<img data-src="assets/images/1.png"   data-elem="pinchzoomer"/>
</div>

это мой homepage.ts: 

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
 selector: 'app-home',
 templateUrl: 'home.page.html',
 styleUrls: ['home.page.scss']
})

export class HomePage implements OnInit{
 ngOnInit() {
    $(function($){
      $('#yourImageID').smoothZoom({
        width: 512,
        height: 384,
        pan_BUTTONS_SHOW: "NO",
        pan_LIMIT_BOUNDARY: "NO",
        button_SIZE: 24,
        button_ALIGN: "top right",    
        zoom_MAX: 300,
        border_TRANSPARENCY: 20,
        container: 'zoom_container'
     });
   });
 }
}

и это часть angular.json: 

"scripts": ["src/test/jquery.min.js",
"src/test/jquery.smoothZoom.min.js"]

когда я запускаю приложение через угловую подачу, в консоли нет ошибки, и кажется, что jquery и jquery.smoothZoom.min.js загружены в scripts.js. Jquery работает, но jquery.smoothZoom.min.js не работает. Я думаю, что это из-за атрибутов data [src и data-elem. Эта страница отлично работает за пределами angular, но с angular мне пока не повезло. Я новичок в angular и любойпомощь приветствуется.

1 Ответ

0 голосов
/ 23 декабря 2018

Поместите вашу стороннюю js в папку ресурсов в любой заданный путь с активами в script

"scripts": [
   "src/test/jquery.min.js",
   "assets/yourpath/jquery.smoothZoom.min.js"
]

, а затем повторно запустите ng-serve и проверьте в сети, что js загружен или нет.

...