简介
arranbartish-angular-cli-widgets 是一个前端技术包，可以用于 Angular CLI 提供的可复用部件的集合。这个包的目的是为了使开发者能够更加快速、方便地构建 Angular 应用程序。
安装
在使用这个包之前，你需要先安装 Node.js 和 npm。如果你还没有安装它们，可以到官网下载，安装成功后，命令行输入下面的代码来安装 arranbartish-angular-cli-widgets：
npm install arranbartish-angular-cli-widgets --save
组件类型
arranbartish-angular-cli-widgets 提供了以下类型的组件：
时间选择器
时间选择器是一个日期选择器，它可以帮助你选择日期、时间和日期范围。使用这个组件可以轻松地为你的应用程序增加日期选择功能。
<app-time-picker></app-time-picker>
分页器
分页器使你可以将大量数据分页显示，以免数据过多造成页面混乱。对于需要处理大量数据的应用程序，使用此组件是至关重要的。
<app-pagination></app-pagination>
图表
arranbartish-angular-cli-widgets 包含丰富的图表选项，让你轻松地将数据可视化，帮助你更好地了解你的数据。使用这个组件可以为你的应用程序增加更多的信息和美观性。
<app-chart></app-chart>
使用
在你的 Angular 项目中引入 arranbartish-angular-cli-widgets，然后在需要使用组件的地方添加它们。例如，在 AppComponent 组件中添加时间选择器组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----------- -- -- ---------
-----------------------------------
--
--
------ ----- ------------ -
-示例代码
时间选择器
你可以在你的 Angular 默认应用程序中添加时间选择器，使用下面的代码示例。首先，需要在 app.module.ts 中引入 BrowserModule 和 NgxMaterialTimepickerModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - --------------------------- - ---- ----------------------------------- ----
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------------------- ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -然后，在 app.component.html 中添加下面的代码：
<mat-form-field> <input matInput [ngxTimepicker]="picker" placeholder="Choose a time"> <ngx-material-timepicker #picker></ngx-material-timepicker> </mat-form-field>
分页器
你可以在你的 Angular 应用中添加分页器，使用下面的代码示例。首先，需要在 app.module.ts 中引入 BrowserModule 和 BrowserAnimationsModule，并安装 ngx-pagination：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ----------------------- - ---- ---------------------------------------
------ - ------------------- - ---- ----------------------------------- ----
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------------------
------------------- ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -然后，在 app.component.html 中添加下面的代码：
-- -------------------- ---- -------
---- ------------------
------ --------------
-------
----
-----------
-------------
-----
--------
-------
--- ---------------- ----------- ------ -- ------ - --------- - ------------- -- ------------ - ---
------ --------- -------
------ ----------- -------
-----
--------
--------
-------------------- --------------- - ------------------------------
------图表
你可以在你的 Angular 应用中添加图表，使用下面的代码示例。首先，在 app.module.ts 中引入 BrowserModule 和 ChartsModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - ------------ - ---- ----------------------------------- ----
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------ ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -然后，在 app.component.html 中添加下面的代码：
-- -------------------- ---- -------
-----
------- ---------
-------------------------
-------------------------
---------------------------
-------------------------
---------------------------
---------
------最后，在 app.component.ts 中添加下面的代码：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- ------------ - ---- -----------
------ - ------ ----- - ---- -------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-- ----
------ ---------------- ------------ - -
----------- -----
--
------ --------------- ------- - -------- ------- ------- ------- ------- ------- --------
------ ------------- --------- - ------
------ -------------- - -----
------ --------------- - ---
------ ------------- --------------- - -
- ----- ---- --- --- --- --- --- ---- ------ ------- -- --
- ----- ---- --- --- --- --- --- ---- ------ ------- -- -
--
-结论
arranbartish-angular-cli-widgets 提供了一个丰富的组件库，可以让你轻松地为你的 Angular 应用程序增加时间选择器、分页器和图表等功能。本文中通过示例代码的方式，详细说明了在你的应用中如何使用这些组件，希望对你有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005595681e8991b448d6ba4