如何在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>

我真的需要得到這個工作，我不知道還有什麼嘗試。

來源

2017-09-01 ghiscoding

可以非分型接近這個鏈接可能是有用的[鏈接]（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

來源

2017-09-01 23:08:23 ghiscoding

偉大的工作@ghiscoding +1 –

我只需要一個指導方針，謝謝@Rahul – ghiscoding

只是在這裏鐘聲，我維持最活躍的分支（6pac）。我經常要求打包版本，但是除了非常基本的東西之外沒有任何與npm有關的事情，我真的不知道如何正確構建一個包。如果任何知道npm或任何其他軟件包管理者的人想要將一個軟件包，最好是不會破壞使用不同（或不是）軟件包管理器的開發人員的代碼庫的軟件包，我很樂意將它集成到我的github回購。 –

如何在Angular 4中使用SlickGrid（jQuery遺留庫）

回答

相關問題