npm包Angular2 Inline Edition 使用指南-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端编程中，我们经常需要使用到各种类似表单的控件，用来方便地收集用户输入的数据。而且，我们经常需要在输入框或文本区域内支持快捷的编辑操作，比如：输入框内即点即改、双击后直接进入编辑模式、按下ESC键或失去焦点后自动保存等等。使用这些了特性我们可以简化用户操作，提升用户体验。

在这篇文章中，我们将介绍一个npm包，叫做angular2-inline-edition，用它你可以很容易地实现一个可编辑的输入框控件（text-editable）。

什么是 `angular2-inline-edition`？

angular2-inline-edition 是一个基于Angular2框架的npm包，封装了一组指令和服务，可以用于创建一个可编辑的输入框控件。这些指令和服务实现了如下特性：

可以直接在表格单元格、图片、标题等各种HTML元素上使用
双击可直接进入编辑模式，按ESC键退出，失去焦点时自动保存
可以在编辑时选择输入框大小和样式，也可以使用自定义的样式
除了支持文本编辑，还可以支持可调整大小的textarea编辑框和可使用select选择器的下拉菜单
支持多种数据类型，如文本、数字、日期、图片等等。
更多的可配置选项等等

如果你需要实现一个简单的可编辑输入框控件，则可以使用这个npm包

开始使用

安装 `angular2-inline-edition`

安装 angular2-inline-edition 所需的 npm 包

npm i --save angular2-inline-edition

引入模块

对于 Angular2 应用，你需要导入 InlineEditorModule 在你的 AppModule 中

import { InlineEditorModule } from 'angular2-inline-edition';

@NgModule({
  imports: [InlineEditorModule]
})
export class AppModule {}

如何使用

现在，你可以在模板中通过内嵌标签（inline html）使用 text-editable 指令了，它会把一个普通的html元素转化为可编辑的元素，如下：

<!-- 使用text-editable指令 -->
<p text-editable>Hello, World!</p>

<!-- 带有属性类型的指令 -->
<p text-editable data-type="number">42</p>

<!-- 也可以在img元素上使用 -->
<img src="test.jpg" text-editable style="width: 100px">

以上示例代码将会展示三个不同的 text-editable 的用法。 text-editable 会在两次鼠标点击之间进入编辑模式，按ESC退出编辑，并在失去焦点时保存数据。

当您的输入值需要进行处理时，您可以使用 (change) 事件响应值更改

<!-- 使用(change)事件 -->
<p text-editable (change)="onInputValueChange(newValue)">Hello, World!</p>

您也可以使用 input> 元素作为文本区域

<!-- text-area 元素，三行文本区域 -->
<textarea text-editable data-type="string" rows="3">Please input your text here</textarea>

您可以声明文本区域的样式：

属性名称	数据类型	描述
height	string	指定文本区域的高度
width	string	指定文本区域的宽度
border	string	边线样式

同时，该npm包还提供了其他许多可用的配置项，让你可以根据你的实际需求对其进行定制。其中有一些列举如下：

[config]="{dataType: 'string'}"
[config]="{maxWidth: '600px', maxHeight: '200px'}"
[config]="{inputClass: 'form-control'}"
[config]="{containerClass: 'my-custom-class'}"
[config]="{selectOptions: ['male', 'female']}"
...

以上示例代码展示了在 text-editable 元素标签上可以用到的 config 参数。

组件源代码

以下是在应用中使用 angular2-inline-edition 的示例代码。本示例代码定义了一个使用 text-editable 指令的组件。

-- -------------------- ---- -------
------ - --------- - ---- ----------------

------------
  --------- ---------
  --------- -
    ----
      --- ----------- ---- -- -------
        ----- ------------- -------------------- ---------- ------------------------------ ----------------------------
        ------- --------------------------------------
      -----
    -----
    ------- -------------------------------
  -
--
------ ----- ------------ -
  ----- - -------- --------- ------- --------- ------- ----------

  ------------------- ----- -
    --------------------- -------
    -------------------- ------
  -

  --------- -
    --- ------- - ------- ------ - ------------------ - ----
    -------------------------
  -

  ---------------- -
    ------------------------------------------- ---
  -
-

以上代码中：

在模板中，我们定义了一个简单的 ul 列表，列表中包含多个可编辑的 li 元素。
我们使用ngFor指令循环遍历了组件中定义的 items 数组，使用 text-editable 指令实现了可编辑 li 元素。
在每个 li 元素的后面有一个 删除 按钮，单击删除指定元素。
可以通过调用组件的 addItem() 方法实现添加一项。

关于更多

angular2-inline-edition 提供了更丰富的功能，请参见 npm Repository 或自行查阅源代码，了解更多信息。

结语

通过上述内容的介绍，相信大家已经了解了 angular2-inline-edition 的使用方法和相关功能。在开发中使用这个npm包，可以更轻松地实现各种可编辑控件，提升用户交互体验。如果你在使用 angular2-inline-edition 上遇到问题，请参阅该npm包的官方文档或Issues区。如有疑问或建议，欢迎留言讨论。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600559e381e8991b448d77dc

npm包Angular2 Inline Edition 使用指南

前言

什么是 angular2-inline-edition？