前言
在前端开发中，使用现成的 npm 包能够快速地帮助我们解决一些常见的问题，提升开发效率。@4geit/ngx-marketplace-category-component 就是一个专门用于前端市场类网站分类展示的 npm 包。这篇文章将会详细介绍如何使用它。
安装
首先，我们需要安装该 npm 包。在命令行中执行以下命令：
npm install @4geit/ngx-marketplace-category-component --save
使用
导入
在你的组件中导入 @4geit/ngx-marketplace-category-component：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------------------- - ---- --------------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
在模板中使用 marketplace-category 组件：
<marketplace-category [data]="categories" (categorySelected)="onSelected($event)"></marketplace-category>
输入
该组件支持一个输入，名为 data。data 的数据结构如下：
interface Category {
name: string,
subcategories: Category[]
}例如：
-- -------------------- ---- -------
----------- ---------- - -
-
----- -------
-------------- -
-
----- -----
-------------- --
--
-
----- -----
-------------- --
--
-
----- -------
-------------- -
-
----- ------
-------------- --
--
-
----- -------
-------------- -
-
----- -----
-------------- --
--
-
----- -------
-------------- --
-
-
-
-
-
-
--
-
----- -------
-------------- -
-
----- -----
-------------- --
--
-
----- -----
-------------- --
--
-
----- -----
-------------- --
-
-
-
--输出
该组件会在用户选择某个分类时触发 categorySelected 事件。该事件会返回选择的分类对象。例如：
onSelected(category: Category) {
console.log(category);
}示例代码
完整的示例代码可以在 GitHub 上找到：https://github.com/4geit/ngx-marketplace-category-component-demo。
结语
本文介绍了如何使用 @4geit/ngx-marketplace-category-component 这个 npm 包。希望这篇文章能够对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1181e8991b448daa64