英文:
Include js library in angular component
问题
我创建了一个新的 anglure cli 项目。我想使用 chessboardjs2 库。
它的文档：https://chessboardjs.com/v2/examples
以及它的 GitHub 地址：https://github.com/oakmac/chessboard2
我成功安装了 npm 包：
npm install @chrisoakman/chessboardjs2
这个包的内容如下：
但是我无法找到如何在组件中引入它。
我可以直接在 index.html 中引入该库并使用它：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chess board</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.css" integrity="sha384-5cxVYodq78gDJaWQIc5iBCUhFERY+VjHOszl2K7BTbZwBbrzQH2IYhOliWHJy6X3" crossorigin="anonymous"> -->
<script src="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.js" integrity="sha384-v+CI0A3P1tu1MDM6cJaBosdhRHCfZlJrhHUFWBGtckCzH/ChKw9EhDHEWGmPkp8t" crossorigin="anonymous"></script>
</head>
<body class="mat-typography">
<app-root></app-root>
<div id="myBoard" style="width: 200px;"></div>
<script>
const board = Chessboard2('myBoard')
</script>
</body>
</html>
但是这种实现方式不允许我在组件中使用它。
我该怎么办？
这是我的第一个 Angular 项目，我可能不是很了解所有内容...
我还尝试将 chessboard2.min.js 和 chessboard2.css 插入到 angular.json 中，但没有成功。
感谢你的帮助。
编辑：我正在寻找在组件中使用 chessboard2.min.js 的 JavaScript 函数的解决方案，而不是在 index.html 的 body 部分使用。
英文:
I created a new anglure cli project. I want to use the chessboardjs2 library.
It's documentation: https://chessboardjs.com/v2/examples
and is github: https://github.com/oakmac/chessboard2
I was able to get the npm package:
npm install @chrisoakman/chessboardjs2
Screen of the content of this package:
but then I was unable to find out how to import it in a component.
I was able to import the library directly in index.html and use it:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chess board</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.css" integrity="sha384-5cxVYodq78gDJaWQIc5iBCUhFERY+VjHOszl2K7BTbZwBbrzQH2IYhOliWHJy6X3" crossorigin="anonymous">
<script src="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.js" integrity="sha384-v+CI0A3P1tu1MDM6cJaBosdhRHCfZlJrhHUFWBGtckCzH/ChKw9EhDHEWGmPkp8t" crossorigin="anonymous"></script> -->
</head>
<body class="mat-typography">
<app-root></app-root>
<div id="myBoard" style="width: 200px;"></div>
<script>
const board = Chessboard2('myBoard')
</script>
</body>
</html>
But this implementation does not allow me to use it in a component.
What can I do?
This is my first angular project and I might not understand everything...
I also tryied to insert the chessboard2.min.js and the chessboard2.css in the angular.json without success.
Thanks for your help
EDIT: I am looking for a solution to use the js function of chessboard2.min.js inside a component. Not in the index.html body.
答案1
得分: 1
{
// angular.json
"styles": [
"src/styles.scss",
"node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.css"
],
"scripts": [
"node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.js"
]
}
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
title = 'chessboard';
public ngOnInit(): void {
const board = (window as any).Chessboard2('board', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
board.start();
}
}
英文:
You can import each file into the "scripts" and "styles" keys of the angular.json file as follows:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
{
// angular.json
"styles": [
"src/styles.scss",
"node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.css"
],
"scripts": [
"node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.js"
]
}
<!-- end snippet -->
In your component you can use the package as follows:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit
{
title = 'chessboard';
public ngOnInit(): void
{
const board = (window as any).Chessboard2('board', {
draggable: true,
dropOffBoard: 'trash',
sparePieces: true
});
board.start();
}
}
<!-- end snippet -->
Altought I think it would be a better idea to use some specific package for angular like ngx-chess-board.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论