如何在Angular 4中使用jQuery插件

Question

我正在嘗試將此https://github.com/ShinDarth/Nestable jquery插件用於嵌套拖放功能。 我已經從npm install jquery --save安裝了jquery，並從npm install @types/jquery --save-dev

我已經import * as $ from 'jquery';聲明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);
  }
}

畢竟它會引發錯誤：

我該如何解決這個問題？

[我已經嘗試過包括從CDN到索引頁面的jquery鏈接，但顯示相同的錯誤]

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>

....

Answer 1

最終，您需要在angular-cli.json安裝jquery和其他庫

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

更改僅在重新啟動ng serve后才適用。

編輯：為進一步閱讀和解釋，本文可能對您有所幫助https://github.com/angular/angular-cli/wiki/stories-global-scripts

如何在Angular 4中使用jQuery插件

問題描述

1 個解決方案

解決方案1
7 已采納 2017-06-18 20:00:55

如何在Angular 4中使用jQuery插件

問題描述

1 個解決方案

解決方案1 7 已采納 2017-06-18 20:00:55

解決方案1
7 已采納 2017-06-18 20:00:55