在Angular组件中包含JavaScript库。

huangapple
go评论89阅读模式
英文:

Include js library in angular component

问题

我创建了一个新的 anglure cli 项目。我想使用 chessboardjs2 库。
它的文档：https://chessboardjs.com/v2/examples
以及它的 GitHub 地址：https://github.com/oakmac/chessboard2

我成功安装了 npm 包：

  1. npm install @chrisoakman/chessboardjs2

这个包的内容如下：

在Angular组件中包含JavaScript库。

但是我无法找到如何在组件中引入它。

我可以直接在 index.html 中引入该库并使用它：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Chess board</title>
  6.   <base href="/">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1">
  8.   <link rel="icon" type="image/x-icon" href="favicon.ico">
  9.   <link rel="preconnect" href="https://fonts.gstatic.com">
  10.   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap" rel="stylesheet">
  11.   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  12.   <!-- <link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.css" integrity="sha384-5cxVYodq78gDJaWQIc5iBCUhFERY+VjHOszl2K7BTbZwBbrzQH2IYhOliWHJy6X3" crossorigin="anonymous"> -->
  13.   <script src="https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.js" integrity="sha384-v+CI0A3P1tu1MDM6cJaBosdhRHCfZlJrhHUFWBGtckCzH/ChKw9EhDHEWGmPkp8t" crossorigin="anonymous"></script>
  14. </head>
  15. <body class="mat-typography">
  16.   <app-root></app-root>
  17.   <div id="myBoard" style="width: 200px;"></div>
  18.   <script>
  19.     const board = Chessboard2('myBoard')
  20.   </script>
  21. </body>
  22. </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:

  1. npm install @chrisoakman/chessboardjs2

Screen of the content of this package:

在Angular组件中包含JavaScript库。

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:

  1. &lt;!doctype html&gt;
  2. &lt;html lang=&quot;en&quot;&gt;
  3. &lt;head&gt;
  4.   &lt;meta charset=&quot;utf-8&quot;&gt;
  5.   &lt;title&gt;Chess board&lt;/title&gt;
  6.   &lt;base href=&quot;/&quot;&gt;
  7.   &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  8.   &lt;link rel=&quot;icon&quot; type=&quot;image/x-icon&quot; href=&quot;favicon.ico&quot;&gt;
  9.   &lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot;&gt;
  10.   &lt;link href=&quot;https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&amp;display=swap&quot; rel=&quot;stylesheet&quot;&gt;
  11.   &lt;link href=&quot;https://fonts.googleapis.com/icon?family=Material+Icons&quot; rel=&quot;stylesheet&quot;&gt;
  12.   &lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.css&quot; integrity=&quot;sha384-5cxVYodq78gDJaWQIc5iBCUhFERY+VjHOszl2K7BTbZwBbrzQH2IYhOliWHJy6X3&quot; crossorigin=&quot;anonymous&quot;&gt;
  13.   &lt;script src=&quot;https://unpkg.com/@chrisoakman/chessboard2@0.3.0/dist/chessboard2.min.js&quot; integrity=&quot;sha384-v+CI0A3P1tu1MDM6cJaBosdhRHCfZlJrhHUFWBGtckCzH/ChKw9EhDHEWGmPkp8t&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt; --&gt;
  14. &lt;/head&gt;
  15. &lt;body class=&quot;mat-typography&quot;&gt;
  16.   &lt;app-root&gt;&lt;/app-root&gt;
  17.   &lt;div id=&quot;myBoard&quot; style=&quot;width: 200px;&quot;&gt;&lt;/div&gt;
  18.   &lt;script&gt;
  19.     const board = Chessboard2(&#39;myBoard&#39;)
  20.   &lt;/script&gt;
  21. &lt;/body&gt;
  22. &lt;/html&gt;

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

  1. {
  2.   // angular.json
  3.   "styles": [
  4.     "src/styles.scss",
  5.     "node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.css"
  6.   ],
  7.   "scripts": [
  8.     "node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.js"
  9.   ]
  10. }
  12. import { Component, OnInit } from '@angular/core';
  14. @Component({
  15.   selector: 'app-root',
  16.   templateUrl: './app.component.html',
  17.   styleUrls: ['./app.component.scss']
  18. })
  19. export class AppComponent implements OnInit {
  20.   title = 'chessboard';
  22.   public ngOnInit(): void {
  23.     const board = (window as any).Chessboard2('board', {
  24.       draggable: true,
  25.       dropOffBoard: 'trash',
  26.       sparePieces: true
  27.     });
  29.     board.start();
  30.   }
  31. }
英文:

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 -->

  1. {
  2.     // angular.json
  3.     &quot;styles&quot;: [
  4.       &quot;src/styles.scss&quot;,
  5.       &quot;node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.css&quot;
  6.     ],
  7.     &quot;scripts&quot;: [
  8.       &quot;node_modules/@chrisoakman/chessboard2/dist/chessboard2.min.js&quot;
  9.     ]
  10. }

<!-- end snippet -->

In your component you can use the package as follows:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. import { Component, OnInit } from &#39;@angular/core&#39;;
  3. @Component({
  4.   selector: &#39;app-root&#39;,
  5.   templateUrl: &#39;./app.component.html&#39;,
  6.   styleUrls: [&#39;./app.component.scss&#39;]
  7. })
  8. export class AppComponent implements OnInit
  9. {
  10.   title = &#39;chessboard&#39;;
  12.   public ngOnInit(): void
  13.   {
  14.     const board = (window as any).Chessboard2(&#39;board&#39;, {
  15.       draggable: true,
  16.       dropOffBoard: &#39;trash&#39;,
  17.       sparePieces: true
  18.     }); 
  20.     board.start();
  21.   }
  22. }

<!-- end snippet -->

Altought I think it would be a better idea to use some specific package for angular like ngx-chess-board.

huangapple
  • 本文由 发表于 2023年3月7日 01:53:55
  • 转载请务必保留本文链接：https://go.coder-hub.com/75654198.html
  • angular
  • import
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定