Question

我是npm中配置部分的新手，我正在尝试使用angular-cli（ng init）创建的角度2项目中使用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。计划在今年第一季度举行。您可以对此功能here

投票

因此，你将不得不使用双手js＆amp; css文件直接进入angular2 app这样 -

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 Final版本2.0.0

Answer 2

感谢您的回复，

@TSW我试图安装两个软件包＆＃34; numbro＆＃34;以及＆＃34; pikaday＆＃34;但它没有成功。

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

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

只有通过在package.json中声明它作为handontable下载numbro和pikaday本身才可以导入handontable。为什么需要使用＆＃34; handsontable.full.min.js＆＃34;

Answer 3

目前暂不回答我们的问题，但Angular 2+官方包装器的开发是scheduled for June。

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

如何在角度2

3 个答案: