简介
@n3/ng-api-classifier-list 是一个 Angular 的 npm 包，它为 Angular 应用程序提供了一种方便的方法来分类显示项目中的 API 列表。该包使用 Angular CDK 的 Virtual Scrolling 功能来提高性能，并允许您自定义列表行的呈现方式。
安装
要使用 @n3/ng-api-classifier-list，请输入以下命令：
npm install @n3/ng-api-classifier-list --save
安装完毕后，您需要将 @n3/ng-api-classifier-list 加入到您的 Angular 模块中：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------ - ---- ------------------ ------ - ----------------------- - ---- ----------------------------- ----------- ------------- --------------- -------- --------------- ------------------------- ---------- --------------- -- ------ ----- --------- - -
使用
添加 @n3/ng-api-classifier-list 到您的应用程序后，您可以在组件中使用以下 HTML 模板：
-- -------------------- ---- -------
----------------------- ---------------- ----------------------------------
------------ ------------------------ -----------------
---- ---------------------------------------------------------
--------------
------------ ---------------------- -------------- ---------------------
---- ----------------------------------- -------- --------
--------------
-------------------------其中，data 是您要显示的 API 列表数据，onApiClick 是当用户点击列表项时调用的回调函数。
apiClassifierListHeader 和 apiClassifierListItem 是可选的，它们允许您自定义呈现在列表中的分类标题和 API 列表项，而不是使用默认标题和列表项。
以下是一个样例数据：
-- -------------------- ---- -------
----- ------- - -
-
--------- -------
----- -
-
----- --------------
------------ ----------
--
-
----- -------------
------------ ---------
-
-
--
-
--------- -------
----- -
-
----- ------------
------------ --------
--
-
----- -------------------
------------ ----
-
-
-
--运行应用程序，您将看到类似于以下的分类 API 列表：
自定义
@n3/ng-api-classifier-list 还提供了一些选项来自定义显示在列表中的内容：
headerHeight：
用于定制分类标题的高度，默认为 40 像素。
<ng-api-classifier-list [data]="apiList" [headerHeight]="60"></ng-api-classifier-list>
itemHeight：
用于定制 API 列表项的高度，默认为 32 像素。
<ng-api-classifier-list [data]="apiList" [itemHeight]="50"></ng-api-classifier-list>
grouped：
用于指示是否将 API 列表分组展示，可选值为 true 或 false，默认为 true。
<ng-api-classifier-list [data]="apiList" [grouped]="false"></ng-api-classifier-list>
将 grouped 设为 false 后，您将看到一个扁平化的 API 列表：
结束语
现在您已经知道如何使用 @n3/ng-api-classifier-list 将您的 API 列表分类显示了！希望这篇文章能够对您的前端开发工作有所帮助。如果您在使用过程中遇到了任何问题或建议，请随时在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcd967216659e244a4e