简介
xng 是一个用于 Angular 应用的扩展库，可以帮助开发者快速构建高效且易于维护的应用程序。它提供了丰富的组件和指令，可用于快速实现常用的前端功能，例如数据绑定、表单验证、路由控制等。
xng 使用了 Angular Material UI 库，所以它的风格与 Angular Material 下的组件一致，并且可与 Angular Material 无缝整合。
安装
在您的 Angular 应用程序中使用 xng，需先安装它：
npm install xng --save
导入
使用 xng 的组件或指令之前，需先在 Angular 模块中导入 xng 模块，例如：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - --------- - ---- ------ ----------- -------- --------------- ----------- ------------- --------------- ---------- -------------- -- ------ ----- --------- - -
使用
xng 提供了很多丰富的组件和指令，例如：
xngForm
xngForm 可用于定义表单及其控件，并提供表单验证功能。
<form xngForm #form="xngForm">
<input type="text" name="name" [(ngModel)]="user.name" xngRequired>
<input type="tel" name="phone" [(ngModel)]="user.phone" xngPattern="^\d{11}$">
<button type="submit" [disabled]="!form.valid">提交</button>
</form>xngDialog
xngDialog 可用于弹出模态框，例如：
-- -------------------- ---- -------
------ - ---------------- - ---- ------
------------ --- --
------ ----- ------------ -
------------------- -------------- ----------------- --
------------ -
-------------------------
------ -----
-------- -----------
-------- -- ----- ---- -- - ----- ----- ------ --------- --
------------------- -- -
-------------------- -- - ------------ --- -
---
-
-xngScrollTop
xngScrollTop 可用于快速实现到顶部的按钮。在 HTML 模板中添加：
<ng-template xngScrollTop><button class="button">TOP</button></ng-template>
xngIfActive
xngIfActive 可用于判断当前路由是否激活，并控制元素的显示与隐藏。例如：
<a routerLink="/user/profile" xngIfActive="user">个人资料</a>
总结
以上是 xng 的简单使用教程，您可以在自己的应用程序中试试看。使用 xng，可以让您更加快捷地开发 Angular 前端应用，减少重复编写简单代码的时间，提高了开发效率，欢迎大家试用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bed81e8991b448d9928