[英]how can i use 3rd party jquery plugins in angular?
我正在嘗試在 angular 應用程序中使用 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>
這是我的主頁.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"]
當我通過 angular serve 運行應用程序時,控制台中沒有錯誤,似乎 jquery 和 jquery.smoothZoom.min.js 已加載到 scripts.js。 jquery 正在工作,但 jquery.smoothZoom.min.js 不工作。 我認為這是因為 data[src 和 data-elem 屬性。 這個頁面在 angular 之外工作正常,但到目前為止我沒有運氣。 我是 angular 的新手,任何幫助表示贊賞。
將您的第 3 方js
放在資產文件夾中, script
帶有資產的任何設置路徑
"scripts": [
"src/test/jquery.min.js",
"assets/yourpath/jquery.smoothZoom.min.js"
]
然后重新運行ng-serve
並檢查網絡是否加載了 js。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.