使用带有Angular 5（Typescript）的jQuery插件失败

Question

我正在尝试将此插件https://github.com/gridstack/gridstack.js集成到一个新的Angular 5（Typescript）应用程序中，但我遇到了这个错误：

我使用npm install gridstack

安装了这个jQuery库

这是我的代码：

app.component.ts

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  title = 'app';

    constructor() {}

  ngOnInit() {
    $(document).ready(function(){
      // It works.
      $("button").click(function(){
        var div = $("div");
        div.animate({left: '100px'}, "slow");
        div.animate({fontSize: '5em'}, "slow");
      });

      // Failed !!!
      $('.grid-stack').gridstack();

    });
  }
}

app.component.html

<div style="text-align:center">
  <h1>
    Hello World!
  </h1>

  <button>Start Animation</button>
  <div style="border:1px solid #555;border-radius:3px;color:white;background:#555;height:105px;width:260px;position:relative; margin-top:10px">jQuery</div>

<div class="grid-stack">
    <div class="grid-stack-item"
        data-gs-x="0" data-gs-y="0"
        data-gs-width="4" data-gs-height="2">
            <div class="grid-stack-item-content"></div>
    </div>
    <div class="grid-stack-item"
        data-gs-x="4" data-gs-y="0"
        data-gs-width="4" data-gs-height="4">
            <div class="grid-stack-item-content"></div>
    </div>
</div>


</div>

显示错误的演示：https://stackblitz.com/edit/angular-1sidhl

Answer 1

尝试下面。

在你的组件中。

    declare var $el: JQuery;  // This is missing in your code, you have to declare $ as variable.

    @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
     })
   export class AppComponent implements OnInit {

       ngOnInit() {
    $(document).ready(function(){

这应该有用。

Answer 2

您需要在脚本部分的.angular-cli.json文件中包含gridstack js文件

"scripts":[
//Your other dependencies, including jQuery
"../node_modules/gridstack/dist/gridstack.js",
//other dependencies
]

然后确保在修改配置

后停止并重新启动ng serve

Answer 3

取代这一行：

import * as $ from 'jquery';

通过：

declare var $: any;

修正了错误。