ng2-chessboard 是一个基于 Angular2 平台开发的国际象棋棋盘组件，它的引入能够很好的提高开发效率。本文将会介绍如何在 Angular2 项目中引入 ng2-chessboard，同时讲解该组件的使用方法，最后演示一个简单的国际象棋应用场景。
安装及引入
ng2-chessboard 是一个 npm 包，安装方法很简单，只需在项目中使用以下命令进行安装：
--- ------- -------------- ------
在 AppComponent.ts 中，需要引入 ChessboardModule 。
------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ---------------- - ---- ----------------- ------ - ------------ - ---- ------------------ ----------- -------- --------------- ------------------ ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
使用方法
在 Angular2 中使用 Chessboard 组件，需要定义一个包含棋局数据（chessboard ）和棋子移动事件的 Controller。 这里定义 ChessboardController 类。
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
----------- -------------------------------------------
-
--
------ ----- -------------------- -
----------- --- - -
--------- --------
---------- ----
--
----------- ---- -
---------------
-
-template 中只需要对 chessboard 进行事件绑定即可。定义变量 chessboard ，并初始化数值，position 表示棋局数据，draggable 表示棋子是否可拖动。当棋子移动时，会触发 OnChange 事件，执行 onChange 函数。
如何使用
设计好 ChessboardController 后，在 app.component.html 中使用以下代码即可。
----------- --------------------------------------
绑定变量 chessboard ，将 Chessboard 组件与 ChessboardController 进行绑定。选中或移动棋子时，在 onChange 事件中变量 chessboard 的值会自动更新。
示例
在这里，我们给大家一个演示国际象棋对局的案例，如下。
------ - --------- - ---- ----------------
------------
--------- ---------
--------- -
-----
---------------
----------- ------------------------ -------------------------------------------
---------------
---- --------------- ------------- --------
------
-
--
------ ----- ------------ -
----------- --- - -
--------- --------
---------- ----
--
-------------- -------- - ---
----------- ---- -
----- ------ - ------ - - - - -----
--------------------------------
-------------------------------------------- - -------------------------- ---
-
-以上代码实现了一个国际象棋棋盘和动作历史记录。当棋子移动时，该动作将会被添加到历史记录中，同时向 html 的 id 为 ‘history’ 的元素中添加对应的信息。
总结
通过这篇文章，您已经学会了如何在 Angular2 项目中使用 npm 包 ng2-chessboard ，并演示了如何在该基础上实现一个简单的国际象棋应用场景。希望这篇文章对您有所帮助，如果您对于该篇文章中内容存在任何疑问，欢迎在评论区中提出。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005726c81e8991b448e8a28