如何在Angular 4中使用SlickGrid（jQuery遗留库）

问题描述：

我正试图在Angular 4中使用名为SlickGrid的遗留jQuery库，并且我似乎无法弄清楚这样做的最佳方式（我也是新的到Angular 4，所以没有帮助）。到目前为止，我找到了一个适用于@types/slickgrid的npm包并安装了它。然后我尝试使用这个如何在Angular 4中使用SlickGrid（jQuery遗留库）

import { Component, OnInit } from '@angular/core'; 
import * as $ from 'jquery'; 
import {Grid} from 'slickgrid';

它导入我的组件然而，这引发了我的一些错误控制台

app.component.ts(5,24): error TS2306: File 'C:/demo/node_modules/@types/slickgrid/index.d.ts' is not a module.

我也试图与这个import 'slickgrid'，但我得到了同样的错误

这里是我的完整component.ts文件

import { Component, OnInit } from '@angular/core'; 
import * as $ from 'jquery'; 
import {Grid} from 'slickgrid'; 

@Component({ 
    selector: 'my-app', 
    template: `<td valign='top' width='50%'> 
     <div id='myGrid' style='width:600px;height:500px;'></div> 
    </td>` 
}) 
export class AppComponent implements OnInit { 

    ngOnInit(): void { 
     let grid; 
     let columns = [ 
     {id: 'title', name: 'Title', field: 'title'}, 
     {id: 'duration', name: 'Duration', field: 'duration'}, 
     {id: '%', name: '% Complete', field: 'percentComplete'}, 
     {id: 'start', name: 'Start', field: 'start'}, 
     {id: 'finish', name: 'Finish', field: 'finish'}, 
     {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'} 
     ]; 
     let options = { 
     enableCellNavigation: true, 
     enableColumnReorder: false 
     }; 
     let data = []; 
     for (let i = 0; i < 500; i++) { 
     data[i] = { 
      title: 'Task ' + i, 
      duration: '5 days', 
      percentComplete: Math.round(Math.random() * 100), 
      start: '01/01/2009', 
      finish: '01/05/2009', 
      effortDriven: (i % 5 === 0) 
     }; 
     } 
     $(() => { 
     grid = new Grid('#myGrid', data, columns, options); 
     }); 
    } 
}

而我的index.html哪里导入库（我可以走的WebPack最终，如果我能得到这是怎么回事）

<html> 
    <head> 
    <link rel="stylesheet" type="text/css" href="styles.css"/> 
    <link rel="stylesheet" type="text/css" href="/node_modules/slickgrid-6pac/slick.grid.css"/> 
    <link rel="stylesheet" type="text/css" href="/components/css/SlickGrid.css"/> 
    </head> 
    <body> 
     <my-app> Loading... </my-app> 
    </body> 
    <script src="/node_modules/slickgrid-6pac/lib/jquery-1.11.2.js"></script> 
    <script src="/node_modules/slickgrid-6pac/lib/jquery.event.drag-2.2.js"></script> 
    <script src="/node_modules/underscore/underscore-min.js"></script> 
    <script src="/node_modules/slickgrid-6pac/slick.core.js"></script> 
    <script src="/node_modules/slickgrid-6pac/slick.grid.js"></script> 
    <!-- Polyfill(s) for older browsers --> 
    <script src="/node_modules/core-js/client/shim.min.js"></script> 
    <script src="/node_modules/zone.js/dist/zone.min.js"></script> 
    <script src="/node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 
    <script src="/dist/basic_slickgrid_ts/systemjs.config.js"></script> 
    <script> 
    System.import('app').catch(function(err){ console.error(err); }); 
    </script> 
</html>

我真的需要得到这个工作，我不知道还有什么尝试。

可以非分型接近这个链接可能是有用的[链接]（https://rahulrsingh09.github.io/AngularConcepts/faq）。一个问题链接第三方js没有类型 –

谢谢我一定会看看它，似乎更好，因为我不必依赖于可能已过时的类型定义。 – ghiscoding

令人惊叹我得到它的工作，如果你想发布它作为答案我肯定会接受它，并upvote它。非常感谢 – ghiscoding

答

非常感谢@Rahul Singh发布了回复我的问题的评论。

安装角CLI和修改angular-cli.json文件

{ 
    "apps": [ 
    { 
    "styles": [ 
     "../node_modules/slickgrid/slick.grid.css", 
     "styles.css" 
    ], 
    "scripts": [ 
     "../node_modules/slickgrid/lib/jquery-1.8.3.js", 
     "../node_modules/slickgrid/lib/jquery.event.drag-2.2.js", 
     "../node_modules/slickgrid/slick.core.js", 
     "../node_modules/slickgrid/slick.grid.js" 
    ],  
}

做一个NPM安装传统图书馆的

npm install slickgrid

在component.html文件中添加<div>网格

<div id='myGrid' style='width:600px;height:500px;'></div>

，最后是component.ts

import { Component, OnInit } from '@angular/core'; 
import $ from 'jquery/dist/jquery'; 
import jQuery from 'jquery/dist/jquery'; 

// using external js modules in Angular 
declare var Slick: any; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    title = 'app'; 

    ngOnInit(): void { 
     let grid; 
     const columns = [ 
     {id: 'title', name: 'Title', field: 'title'}, 
     {id: 'duration', name: 'Duration', field: 'duration'}, 
     {id: '%', name: '% Complete', field: 'percentComplete'}, 
     {id: 'start', name: 'Start', field: 'start'}, 
     {id: 'finish', name: 'Finish', field: 'finish'}, 
     {id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven'} 
     ]; 
     const options = { 
     enableCellNavigation: true, 
     enableColumnReorder: false 
     }; 
     let data = []; 
     for (let i = 0; i < 500; i++) { 
     data[i] = { 
      title: 'Task ' + i, 
      duration: '5 days', 
      percentComplete: Math.round(Math.random() * 100), 
      start: '01/01/2009', 
      finish: '01/05/2009', 
      effortDriven: (i % 5 === 0) 
     }; 
     } 
     $(() => { 
     grid = new Slick.Grid('#myGrid', data, columns, options); 
     }); 
    } 
}

和它的作品，再次感谢@Rahul

伟大的工作@ghiscoding +1 –

我只需要一个指导方针，谢谢@Rahul – ghiscoding

只是在这里钟声，我维持最活跃的分支（6pac）。我经常要求打包版本，但是除了非常基本的东西之外没有任何与npm有关的事情，我真的不知道如何正确构建一个包。如果任何知道npm或任何其他软件包管理者的人想要将一个软件包，最好是不会破坏使用不同（或不是）软件包管理器的开发人员的代码库的软件包，我很乐意将它集成到我的github回购。 –

如何在Angular 4中使用SlickGrid（jQuery遗留库）

相关推荐