如何在 angular 2 中使用 handsontable 库

Question

我是 npm 配置部分的新手，我正在尝试在 angular 2 使用 angular-cli (ng init) 创建的项目中使用 handsontable 库。我为此添加了打字稿定义。

这是我的 app.compponent.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

以来的所有方法我都试过了

Answer 1

目前HandsOnTable官方暂不支持Angular 2.参考论坛参考here. It is planned for Q1 this year. You can leave your vote for this feature here

因此，您将不得不像这样将 handsontable js 和 css 文件直接用于 angular2 应用程序-

Step1: 在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>

Step2：样本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 最终版本 2.0.0

Answer 2

感谢您的回复，

@TSW 我尝试安装 "numbro" 和 "pikaday" 这两个软件包，但没有成功。

@Sanket 感谢您提供解决方案，但当我使用 angular cli 时，我发现在 angular-cli.json 中添加以下代码段有效

"scripts": [
            "./../node_modules/jquery/dist/jquery.min.js",
            "./../node_modules/handsontable/dist/handsontable.full.min.js"
        ],

是否只有通过在 package.json 中声明 handsontable 来导入 handsontable 才能实现这一点，因为 handsontable 会自行下载 numbro 和 pikaday。为什么需要使用 "handsontable.full.min.js"

Answer 3

这暂时没有回答我们的问题，但是 Angular 2+ 的官方包装器的开发是 scheduled for June。

更新（2017 年 8 月 29 日）： 我们现在看到了官方 Angular2+ 包装器的开发进展，可以在这里找到：https://github.com/handsontable/angular-handsontable

如何在 angular 2 中使用 handsontable 库

How to use handsontable library in angular 2

npm

handsontable

typescript

angular2-components

angular2-cli