ng-inline-edit 是一个基于 Angular 的 npm 包，用于在页面上实现即时编辑功能。它提供了一种简单的方法，让用户能够直接在网页上编辑表格、文本和其他元素，而无需打开新窗口或者使用繁琐的表单。
安装
首先，在你的项目中安装 ng-inline-edit：
npm install ng-inline-edit --save
使用
引入 NgInlineEditModule 模块，并将其添加到 NgModule 中：
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ -------------------- ---- -----------------
-----------
------------- -
------------
--
-------- -
--------------
------------------
--
---------- --------------
--
------ ----- --------- -
-接下来，你需要为想要进行编辑的元素加上 inlineEdit 属性，并且设定初始值：
<span inlineEdit="initial value">editable text</span>
如果你要对表格进行编辑，可以把 inlineEdit 属性放在 td 元素上：
<table>
<tr>
<td inlineEdit="initial value">editable cell</td>
</tr>
</table>另外，如果你想在编辑完成后执行一些操作，比如保存数据，可以使用 (onSave) 事件：
<span inlineEdit="initial value" (onSave)="handleSave($event)">editable text</span>
handleSave(value: string) {
console.log(`saved value: ${value}`);
}深度理解
ng-inline-edit 基于 Angular 的特性和机制，使用了一些比较高级的技术。如果你想深入了解它的实现原理，可以查看源码：
其中，NgInlineEditComponent 组件负责处理编辑器的 UI 和状态，而 EditableDirective 则用于指令形式地在元素上添加编辑功能。
总结
ng-inline-edit 为前端开发者提供了一种简单、直接且易于使用的即时编辑方案。通过引入 npm 包并在需要编辑的元素上添加 inlineEdit 属性，你可以快速构建一个具有编辑功能的页面，并且可以通过 (onSave) 事件执行保存操作。如果你对 ng-inline-edit 的实现原理感兴趣，可以查看其源码以了解更多细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38785