我正在尝试在角度应用程序中使用smooth_zoom插件。(http://vectorflower.com/preview/smooth_zoom/index.html)。它使用自定义 HTML 属性,但似乎此属性在 Angular 中不起作用。如何在 Angular 6 中使用此库和其他类似库?我已将jquery和smooth_zoom.min.js添加到"angular.json脚本路径"中这是我的代码:主页.html:
<div class="zoomHolder">
<img data-src="assets/images/1.png" data-elem="pinchzoomer"/>
</div>
这是我的主页:
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 已加载到脚本中.js jquery 正在工作,但 jquery.smoothZoom.min.js 不起作用。我认为这是因为数据[src 和 data-elem 属性。 这个页面在 angular 之外工作正常,但到目前为止,使用 angular 我没有运气。我是 Angular 的新手,任何帮助都值得赞赏。
第三方js
放在资产文件夹中任何包含资产的设置路径script
"scripts": [
"src/test/jquery.min.js",
"assets/yourpath/jquery.smoothZoom.min.js"
]
然后重新运行ng-serve
并检查网络中js是否加载。