2

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

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

索引.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的所有方法

4

3 回答 3

5

目前，HandsOnTable 官方不支持 Angular 2。参考论坛参考这里。计划在今年第一季度推出。您可以在此处留下您对该功能的投票

因此，您将不得不像这样在 angular2 应用程序中直接使用可动手操作的 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 最终版本 2.0.0

于 2017-01-23T10:34:58.453 回答
0

谢谢回复，

@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 下载 numbro 和 pikaday 来导入 handsontable 才能实现这一点。为什么需要使用“handsontable.full.min.js”

于 2017-01-24T11:28:24.793 回答
0

这暂时不能回答我们的问题，但 Angular 2+ 官方包装器的开发计划于 6 月进行。

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

于 2017-06-15T06:52:30.830 回答