如何在 Angular 4 中使用 SlickGrid(jQuery 遗留库)
how to use SlickGrid (jQuery legacy library) in Angular 4
我正在尝试获取一个名为 SlickGrid working in Angular 4 and I cannot seem to figure out the best way to do that (I'm also new to Angular 4 so that doesn't help). So far, I found an npm package for @types/slickgrid 的遗留 jQuery 库并安装它。然后我尝试使用 this
将它导入到我的组件中
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>
我真的需要让它正常工作,但我不知道还能尝试什么。
非常感谢@Rahul Singh 发表的评论回答了我的问题。按照下面显示的说明,我能够创建一个新的开源库 Angular-Slickgrid,现在每个人都可以享用。
安装 Angular-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
我正在尝试获取一个名为 SlickGrid working in Angular 4 and I cannot seem to figure out the best way to do that (I'm also new to Angular 4 so that doesn't help). So far, I found an npm package for @types/slickgrid 的遗留 jQuery 库并安装它。然后我尝试使用 this
将它导入到我的组件中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>
我真的需要让它正常工作,但我不知道还能尝试什么。
非常感谢@Rahul Singh 发表的评论回答了我的问题。按照下面显示的说明,我能够创建一个新的开源库 Angular-Slickgrid,现在每个人都可以享用。
安装 Angular-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