时间戳

首页 > 解决方案 > 将 JavaScript 棋盘库添加到 Angular 项目

javascript - 将 JavaScript 棋盘库添加到 Angular 项目

问题描述

我正在尝试设置一个显示棋盘的基本角度网页。我正在使用此处找到的 chessboardjs 库。

网站为 HTML 和 JS 分别给出的初始化空棋盘的说明是：

<div id="board1" style="width: 400px"></div>

var board1 = ChessBoard('board1', 'start');

在我的打字稿文件中，到目前为止我只有：

import { Component } from '@angular/core';
import { ChessBoard } from 'chessboardjs';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})

export class AppComponent {
    board1 = ChessBoard('board1', 'start');
}

当我加载我的网页时，我收到以下错误：

错误类型错误：对象（...）不是函数

它指向的线是我使用 ChessBoard 函数的地方。

我已经通过 npm 包含了 chessboard 和 @types/chessboard 库并且没有编译错误。

对于如何在我的 Angular 项目中包含 javascript 库的任何指导，我将不胜感激。

标签： javascriptangulartypescripttypescript-typingschessboard.js

解决方案

角.json

...

"scripts": [
      "call ChessBoard library here"
   ],
...

types.d.ts在 src 目录中创建新文件

类型.d.ts

declare const ChessBoard:any;

推荐阅读