[英]How to use jquery plugin in angular 4
I am trying to use this https://github.com/ShinDarth/Nestable jquery plugin for nested drag and drop feature. 我正在尝试将此https://github.com/ShinDarth/Nestable jquery插件用于嵌套拖放功能。 I have already installed the jquery from npm install jquery --save
and typings from npm install @types/jquery --save-dev
我已经从npm install jquery --save
安装了jquery,并从npm install @types/jquery --save-dev
i have declared import * as $ from 'jquery';
我已经import * as $ from 'jquery';
声明import * as $ from 'jquery';
in my component and included the plugin file in index.html
page. 在我的组件中,并将插件文件包含在index.html
页面中。
Here is my component code: 这是我的组件代码:
import { Component, OnInit,AfterViewInit,ElementRef } from '@angular/core';
import { MdDialog, MdDialogRef } from "@angular/material";
import { MediaUploadComponent } from '../helper-component/media-upload/media-upload.component';
import * as $ from 'jquery';
// import 'jquery';
// declare const $: JQueryStatic;
// declare var $:any;
// import $ from "jquery";
@Component({
selector: 'app-appearance',
templateUrl: './appearance.component.html',
styleUrls: ['./appearance.component.css']
})
export class AppearanceComponent implements OnInit ,AfterViewInit{
private selectedOption:string ;
site_icon:any;
constructor() { }
ngOnInit() {
}
ngAfterViewInit(){
// jquery plugin nestable
$('.nestable').nestable();
//console.log(jQuery.fn.jquery);
}
}
After all it throws error : 毕竟它会引发错误:
How can i fix this problem? 我该如何解决这个问题?
[i have already tried including the jquery link to index page from the cdn but shows the same error] [我已经尝试过包括从CDN到索引页面的jquery链接,但显示相同的错误]
Index.html Index.html
!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../assets/bootstrap.min.css">
<!--<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> -->
<script src="../assets/nestable/jquery.nestable.js"></script>
<script src="../assets/nestable/jquery.nestable++.js"></script>
</head>
.... ....
Ultimately you'd want to install jquery
and other libraries in the angular-cli.json
最终,您需要在angular-cli.json
安装jquery
和其他库
scripts: [
"../node_modules/jquery/dist/jquery.min.js",
"../assets/nestable/jquery.nestable.js",
"../assets/nestable/jquery.nestable++.js"
]
The changes will only apply once you restart ng serve
. 更改仅在重新启动ng serve
后才适用。
EDIT: For further reading and explanation this article might be of help https://github.com/angular/angular-cli/wiki/stories-global-scripts 编辑:为进一步阅读和解释,本文可能对您有所帮助https://github.com/angular/angular-cli/wiki/stories-global-scripts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.