我是 npm 中配置部分的新手，我正在尝试在使用 angular-cli (ng init) 创建的 Angular 2 项目中使用 Handsontable 库。我添加了相同的 typescript 定义。
这是我的 app.component.ts
import { Component } from '@angular/core';
import 'handsontable/dist/handsontable.full.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngOnInit() {
}
ngAfterViewInit() {
const myData = [
["1", "2", "3", "4", "5", "6"]
];
const config = {
data: myData,
colHeaders: ['A', 'B', 'C', 'D', 'E', 'F'],
startRows: 5,
startCols: 5,
minSpareCols: 1,
//always keep at least 1 spare row at the right
minSpareRows: 1
//always keep at least 1 spare row at the bottom,
};
(<any>$("#test")).handsontable(config);
}
}
app.component.html
<h1>
<div id ="test"></div>
</h1>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AngularStart2</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
tsconfig.js
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
给我错误:
ReferenceError: Handsontable is not defined at r.fn.init.$.fn.handsontable (http://localhost:4200/vendor.bundle.js:87583:26) at AppComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:79:20)
我也尝试过通过以下方式导入
import {Handsontable} from 'handsontable';
它给了我以下错误
Uncaught Error: Cannot find module 'numbro'
at newRequire (handsontable.js:53) [<root>]
at :8000/vendor.bundle.js:102461:16 [<root>]
at Object.23.cellTypes (handsontable.js:4439) [<root>]
at newRequire (handsontable.js:58) [<root>]
我已经尝试了从https://github.com/handsontable/handsontable/issues/3627开始的所有方法
最佳答案
目前HandsOnTable官方不支持Angular 2。引用论坛引用here 。计划于今年第一季度进行。您可以为此功能投票here
因此，您必须像这样直接在 Angular2 应用程序中使用 Handsontable js 和 css 文件 -
第1步:在Index.html中，添加以下两行-
<link rel="stylesheet" href="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.css">
<script src="http://docs.handsontable.com/0.30.1/bower_components/handsontable/dist/handsontable.full.js"></script>
第 2 步:示例 AppComponent.ts 如下所示 -
import { Component, AfterViewInit } from '@angular/core';
declare var Handsontable: any;
@Component({
selector: 'my-app',
template: `
<h3>Angular2 Final 2.0.0</h3>
<h2>Handsontable Performance Test (10000x100)</h2>
<div id="example"></div>
`
})
export class AppComponent implements AfterViewInit {
container: any;
hot: any;
ngAfterViewInit() {
this.container = document.getElementById('example');
this.hot = new Handsontable(this.container, {
data: Handsontable.helper.createSpreadsheetData(10000, 100),
rowHeaders: true,
colHeaders: true,
// performance tip: set constant size
colWidths: 80,
rowHeights: 23,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false,
});
}
}
结果输出:
请注意 - 我使用的是 angular2 Final 版本 2.0.0
关于typescript - 如何在 Angular 2 中使用 Handsontable 库，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41638471/