Question

我正在尝试建立一个显示棋盘的基本角度网页。我正在使用here找到的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');
}

加载网页时，出现以下错误：

错误TypeError：Object（...）不是函数

它指向的行是我使用ChessBoard函数的位置。

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

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

Answer 1

angular.json

...

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

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

types.d.ts

declare const ChessBoard:any;

Answer 2

AppComponent应该是

import { Component, AfterViewInit } from '@angular/core';
import * as ChessBoard from 'chessboardjs/www/js/chessboard';

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

  title = 'frontend';
  board1: ChessBoard;

  ngAfterViewInit() {
    this.board1 = ChessBoard('board1', {
      draggable: true,
      pieceTheme: 'node_modules/chessboardjs/www/img/chesspieces/wikipedia/{piece}.png'
    });
  }

}

请确保将jQuery添加到index.html文件的scripts或angular.json中，并将node_modules/chessboardjs/www/css/chessboard.css添加到{{1 }}文件。

将JavaScript Chessboard库添加到Angular项目

2 个答案: