as-ng2-components 是一个由 Angularjs 自定义指令组成的 npm 包，它为开发者解决了大量重复劳动，提高了产品的可维护性和开发效率。本文将详细介绍如何使用 as-ng2-components 制作组件并加以应用。
安装 as-ng2-components
在开始使用 as-ng2-components 前，需要先进行包的安装。在控制台中输入以下命令即可安装：
$ npm install as-ng2-components --save-dev
创建组件
在开始创建组件之前，我们需要先用 Angular 2 命令行工具生成一个当前项目的基本架构。在控制台中输入以下命令即可生成：
$ ng new my-app
接下来，我们需要在 my-app 项目中新建一个组件，以便更好地描述如何使用 as-ng2-components。我们可以用 Angular 2 的命令行工具创建一个新的组件。在控制台中输入以下命令即可创建：
$ ng generate component my-component
引入 as-ng2-components
在使用 as-ng2-components 前，需要先引用它。打开 my-component.component.ts 文件，在文件头部添加以下代码：
import 'as-ng2-components';
这条代码是使用 as-ng2-components 的前提，只有添加了这条代码，我们才能引用 as-ng2-components 中的指令。
使用 as-ng2-components
在 my-component.component.html 文件中，使用 as-ng2-components 指令的格式为：
<as-[component-type] [input-parameters]></as-[component-type]>
其中，component-type 为组件类型，input-parameters 为被绑定到组件的输入值。
例如，我们可以创建一个 Tooltip 组件，并在 my-component.component.html 文件中使用它：
<as-tooltip tooltip-input="Hello, angulary!"></as-tooltip>
此时，需要在 my-component.component.ts 文件中导入以下内容：
import { Directive, Input} from '@angular/core';
import 'as-ng2-components';同时，在 my-component.component.ts 文件中，编写以下代码：
-- -------------------- ---- -------
------------
--------- ------------
--
------ ----- ---------------- -
----------------------- ------------- -------
------------------- --- ----------- ------- --------- --------- -
---------------------------------------------- ---------------------- -------------------
-
-在这段代码中，我们创建了一个指令，将 Tooltip 绑定到了 my-component，完成 Tooltip 的创建。
总结
as-ng2-components 是一个由 Angularjs 自定义指令组成的 npm 包，引用和使用它能大大提升开发效率和软件可维护性。本文介绍了 as-ng2-components 使用的详细流程，从安装到创建组件，以及使用 as-ng2-components 制作组件的具体步骤。相信在学习完毕本文后，读者已经掌握了 as-ng2-components 的使用技巧，可以开始利用它来为自己的开发工作提升效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557d181e8991b448d4dc3