ng2-package-cbjtest 是一个针对 Angular2+ 框架的 npm 包，提供了一些常用的功能组件和指令。本篇文章将详细介绍如何使用 ng2-package-cbjtest 包，并提供一些实例代码供读者参考和学习。
安装
打开终端，进入你的项目目录，执行以下命令来安装 ng2-package-cbjtest：
npm install ng2-package-cbjtest --save
组件和指令
ng2-package-cbjtest 包含了以下组件和指令：
组件
- DatepickerComponent：日期选择器组件，支持年、月、日的选择；
- ImageUploaderComponent：图片上传组件，支持上传多张图片，并可以预览、删除已上传的图片；
- LoadingComponent：简易的加载中提示组件；
- MessageBoxComponent：消息提示框组件，支持成功、失败、警告、信息类型的提示框。
指令
- InputTrimDirective：输入框 Trim 指令，自动去除输入框首尾的空格；
- PreventInputSpaceDirective：输入框阻止输入空格指令，用户无法通过键盘输入空格。
使用示例
DatepickerComponent
在 app.module.ts 中引入 DatepickerComponent：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- ------ - -------- - ---- ---------------- ------ - ------------------- - ---- ---------------------- ----------- ------------- ---------------------- -------- -------------- ------------- -------- ---------------------- -- ------ ----- --------- --
接下来在组件中使用 DatepickerComponent：
<app-datepicker [(ngModel)]="model.date"></app-datepicker>
ImageUploaderComponent
在 app.module.ts 中引入 ImageUploaderComponent：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------ ------ - ----------- - ---- ----------------- ------ - -------- - ---- ---------------- ------ - ---------------------- - ---- ---------------------- ----------- ------------- ------------------------- -------- -------------- ------------- -------- ------------------------- -- ------ ----- --------- --
接下来在组件中使用 ImageUploaderComponent：
<app-image-uploader [imageList]="imageList" (onChange)="onImageChange($event)" ></app-image-uploader>
LoadingComponent
在 app.module.ts 中引入 LoadingComponent：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------ ------ - -------- - ---- ---------------- ------ - ---------------- - ---- ---------------------- ----------- ------------- ------------------- -------- --------------- -------- ------------------- -- ------ ----- --------- --
接下来在组件中使用 LoadingComponent：
<app-loading *ngIf="isLoading"></app-loading>
MessageBoxComponent
在 app.module.ts 中引入 MessageBoxComponent：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------ ------ - -------- - ---- ---------------- ------ - ------------------- - ---- ---------------------- ----------- ------------- ---------------------- -------- --------------- -------- ---------------------- -- ------ ----- --------- --
接下来在组件中使用 MessageBoxComponent：
<app-message-box [messageType]="messageType" [messageContent]="messageContent" [autoClose]="autoClose" ></app-message-box>
InputTrimDirective
在组件的 HTML 模板中使用 InputTrimDirective，这里以 input 输入框为例：
<input type="text" appInputTrim [(ngModel)]="inputValue" />
PreventInputSpaceDirective
在组件的 HTML 模板中使用 PreventInputSpaceDirective，这里以 input 输入框为例：
<input type="text" appPreventInputSpace [(ngModel)]="inputValue" />
总结
ng2-package-cbjtest 提供了一些实用的组件和指令，可以帮助前端开发人员更快、更方便地开发 Angular2+ 项目。通过本文的使用教程，相信读者可以轻松上手 ng2-package-cbjtest，提升代码开发效率，从而更加高效地工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055e8381e8991b448dbe00