前言
npm 包是 JavaScript 开发中经常使用的资源，它们可以提供各种代码、库或工具。其中，wild-angular 是一个方便快捷的 Angular 框架扩展，使开发变得更加轻松。
安装
使用 npm 安装：
npm install wild-angular
引用
首先，在你的 angular.json 文件中添加：
"scripts": [
"node_modules/wild-angular/dist/wild-angular.min.js"
]然后，在你的 app.module.ts 文件中引用：
-- -------------------- ---- -------
------ - ---------- - ---- ---------------
-----------
------------- -
------------
--
-------- -
--------------
---------- -- --- ---- ----
--
---------- ---
---------- --------------
--
------ ----- --------- - -开始使用
下面我们来一步步体验如何使用 wild-angular。
1. 注入服务
我们需要注入 WildService 服务，将它声明为一个类的属性，例如在 app.component.ts 文件中：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------- - ---- --------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - ----- - -------------------- ------------------- ------------ ------------ - - -
2. 使用模态框
WildModal 组件提供模态框的基础功能，可以快速实现模态框的弹出和关闭。我们需要在模板文件中使用 WildModal 组件，并在后台代码中调用 showModal() 和 hideModal() 方法。
<button (click)="showModal()">Show Modal</button> <wild-modal #myModal> <h1>Hello WildModal!</h1> <button (click)="hideModal()">Close Modal</button> </wild-modal>
-- -------------------- ---- -------
------ ----- ------------ -
--------------------- -------- ------ --------
----------- -
-------------------------
-
----------- -
-------------------------
-
-3. 使用消息框
WildAlert 组件提供信息框的基础功能，可以快速实现对话框的弹出，例如警告框、成功框、错误框等。我们可以直接在后台代码中调用 showAlert() 方法。
<button (click)="showAlert()">Show Alert</button>
export class AppComponent {
@ViewChild('myAlert', {static: true}) myAlert;
showAlert() {
this.myAlert.showAlert('Hello WildAlert!', 'success');
}
}4. 使用表格
WildTable 组件提供使用 Angular 所需的基础表格功能，可以实现数据的显示、排序、分页等。我们可以在后台代码中通过调用 getDataSource 方法设置表格数据源和数据的字段，以及通过调用 sortData 方法实现按日期、数字等排序。
<wild-table [dataSource]="tableData" [displayedColumns]="tableColumns"></wild-table>
-- -------------------- ---- -------
------ ----- ------------ -
------------ - -
- ----- ----- ------ ---- --
- ----- ------- ------ ------ -
--
--------- - -
- --- -- ----- ----- --
- --- -- ----- ------- -
--
--------------------- -------- ------- ---------- ----------
----------------- -
-------------------------------------------- -------------------
-
---------- -
----------------------------- ------
-
------------ -
------------------------------- -------
-
-总结
通过本篇文章，你已经学会了如何安装、引用和使用 wild-angular npm 包，同时深入了解了 WildService、WildModal、WildAlert、WildTable 等常用组件和服务的使用方法。希望这篇文章对你的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006710e8dd3466f61ffe1e5