gpt4 book ai didi

javascript - 如何在 Angular 4 中使用 jquery 插件

转载 作者:行者123 更新时间:2023-11-28 11:47:51 25 4
gpt4 key购买 nike

我正在尝试使用这个https://github.com/ShinDarth/Nestable用于嵌套拖放功能的 jquery 插件。我已经从 npm install jquery --save 安装了 jquery以及来自 npm install @types/jquery --save-dev

的输入

我已在组件中声明 import * as $ from 'jquery'; 并将插件文件包含在 index.html 页面中。

这是我的组件代码:

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);
}
}

毕竟它抛出错误:enter image description here

我该如何解决这个问题?

[我已经尝试将 jquery 链接包含到 CDN 的索引页面,但显示了相同的错误]

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>

....

最佳答案

最终您需要在 angular-cli.json 中安装 jquery 和其他库

scripts: [
"../node_modules/jquery/dist/jquery.min.js",
"../assets/nestable/jquery.nestable.js",
"../assets/nestable/jquery.nestable++.js"
]

只有在重新启动 ngserve 后,更改才会生效。

编辑:为了进一步阅读和解释本文可能会有所帮助 https://github.com/angular/angular-cli/wiki/stories-global-scripts

关于javascript - 如何在 Angular 4 中使用 jquery 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44618805/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com