介绍
tr-angular-amazing 是一个针对 Angular 应用开发的 npm 包，它提供了许多实用的组件、指令、服务等等，可以帮助我们更高效地进行前端开发。本文将介绍其使用方法及基本功能。
安装
您可以使用 npm 安装 tr-angular-amazing：
npm install tr-angular-amazing
然后，在您的 Angular 项目中导入它：
-- -------------------- ---- ------- ------ - ---------------------- - ---- --------------------- ----------- ------------- --------------- -------- --------------- ------------------------ ---------- --- ---------- -------------- -- ------ ----- --------- --
基本功能
切换按钮
你可以在你的应用中使用 tr-toggle-button 组件来创建一个切换按钮：
<ta-toggle-button [checked]="isChecked" (onChange)="toggleChanged($event)"></ta-toggle-button>
其中，isChecked 是初始状态，onChange 事件会在按钮状态改变时触发。
复制按钮
你可以使用 tr-copy-button 组件来实现复制功能：
<ta-copy-button [textToCopy]="textToCopy" (onCopy)="onCopy($event)"></ta-copy-button>
其中，textToCopy 是需要被复制的文本内容，onCopy 事件会在复制成功时触发。
折叠面板
你可以使用 tr-accordion 组件来创建一个折叠面板：
<ta-accordion>
<ta-accordion-panel [title]="panelTitle">
Content here
</ta-accordion-panel>
<ta-accordion-panel [title]="panelTitle2">
Content here
</ta-accordion-panel>
</ta-accordion>其中，panelTitle 是面板的标题，可以自定义设置。
模态框
你可以在你的应用中使用 tr-modal 组件来创建一个模态框：
<button (click)="openModal()">Open Modal</button> <ta-modal [show]="showModal" (onClose)="closeModal()"> <h1>Modal Header</h1> <p>Modal Content</p> <button (click)="closeModal()">Close Modal</button> </ta-modal>
其中，showModal 是一个布尔型变量，代表模态框是否显示出来，onClose 事件会在关闭模态框时触发。
示例代码
下面的示例展示了如何使用 tr-angular-amazing 中的组件实现一个简单的表单：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
----- ------------------------
-----
------------------------
------ ----------- ---------------------- ----------------
------
-----
------------------------
------ --------------- ---------------------- ----------------
------
-----
----------------- ---------------------- -----------------------------------------------------------
--------------- ----------
------
------- -----------------------------
-------
-
--
------ ----- ------------ -
--------- ------ - ---
--------- ------ - ---
----------- ------- - ------
------------------------- -------- -
--------------- - ------
-
---------- -
-- ---- ----- ----- ----
-
-在这个示例中，我们使用了 tr-toggle-button 来实现一个复选框，使用了 onSubmit 来响应表单提交。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fda81e8991b448dd6dd