时间戳

首页 > 解决方案 > 我如何在 Angular 中使用 3rd 方 jquery 插件？

javascript - 我如何在 Angular 中使用 3rd 方 jquery 插件？

问题描述

我正在尝试在 Angular 应用程序中使用 smooth_zoom 插件。（http://vectorflower.com/preview/smooth_zoom/index.html）。它使用自定义 html 属性，但似乎此属性不适用于角度。我如何在 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 的新手，任何帮助都将不胜感激。

标签： javascriptjqueryangularattributesangular6

解决方案

将您的第 3 方js放在资产文件夹中的任何包含资产的设置路径中script

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

然后重新运行ng-serve并检查网络是否加载了 js。

推荐阅读