介绍
angular2-patternfly-shims 是一个 npm 包，它为基于 PatternFly 设计系统的 Angular 应用程序提供了一组类型定义和可调用的函数，使得应用程序可以更方便地与原生的 PatternFly JavaScript 库集成。
在使用 Angular 和 PatternFly 构建应用程序时，需要通过安装和使用 angular2-patternfly-shims 实现快速、可靠的开发。在本文中，我们将深入了解 angular2-patternfly-shims 的用法和如何在应用程序中使用它。
安装
要安装 angular2-patternfly-shims，需要在命令行中执行以下代码：
npm install angular2-patternfly-shims --save
该命令会将 angular2-patternfly-shims 安装到您的项目依赖中，同时更新您的 package.json 文件。
使用
在应用程序中使用 angular2-patternfly-shims，需要在引入它们之前以 JavaScript 的方式加载 PatternFly 库：
-- -------------------- ---- -------
--------- -----
------
------
---
---- ---- --------- --- ---------- --- ---
----- ---------------- -------------------------------------------------------
----- ---------------- -----------------------------------------------------------------
-------
------
----------
---- ------- ---------- -- - ------ ---
------- --------------------------------------------------
------- -----------------------------------------------------------
------- -------------------------------------------------------------
------- -----------------------------------------------------------------------------------
-----------
-------
-------现在，您可以在应用程序的组件中使用 angular2-patternfly-shims。例如，在一个使用图表的组件中，可以这样使用：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - -- -- ---- -----
------ - ------- - ---- ----------------------------
------------
--------- ------------
------------ -------------------------
--
------ ----- -------------- ---------- ------ -
----------- ---- -
----- ----- - --- ---------
------------------ ------------------
------ ------- -------
------ -
- --- ----------- ---------- --- ------------- ---- ---------- --
- --- ------------- ---------- --- ----------- ---- ----- ------- -
--
------------------ -
---
----- ---- - --- -- --- --- --- ----
-------------------------- --- ------
-
-在这个示例中，我们通过 import PfChart 的方式从 angular2-patternfly-shims 中引入了 PfChart 类。我们还引入了 d3（ 一个流行的 JavaScript 库，用于绘图、交互和动画）。
在 ngOnInit 方法中，我们创建了 PfChart 类的一个实例，为图表设置了标题和工具栏，并添加了一个柱形数据系列。之后，我们可以在组件的 HTML 模板中使用一个具有唯一 ID 的 div 元素，将这个图表渲染到这个元素中：
<div id="chartContainer"></div>
API 参考
该教程只覆盖了 PfChart 类和一个应用示例。 angular2-patternfly-shims 还包含许多其他可用的类型定义和函数。因此，建议用户查看文档并参考 API 参考手册。
结论
通过使用 angular2-patternfly-shims，您可以轻松地将 PatternFly JavaScript 库集成到 Angular 应用程序中。本文提供了一个简短的教程，展示了如何安装、配置和使用 angular2-patternfly-shims，并提供了一个示例应用程序。但是，为了提高产品质量并尽可能地利用 PatternFly 的功能，需要在完成更多开发工作之前，详细学习它的 API，并考虑在应用程序中使用它的其他功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005542181e8991b448d175d