简单的angular内联编辑器

简单的angular内联编辑器
插件名称 angular-inline-editor
发布时间 2020年6月11日

angular-inline-editors旨在与Angular 4+配合使用,当前依赖项是Bootstrap(3.3.7+)和FontAwesome。

路线图-内联编辑

  •  输入
    •  输入文本
    •  输入-密码-模式
    •  输入-数字
    •  输入-电子邮件
    •  输入-电话
    •  输入-模式
  •  文本区域
  •  选择
  •  复选框
  •  复选框列表
  •  电台清单
  •  标签
  •  日期
  •  时间
  •  日期时间选择器
  •  提前输入
  •  验证
    •  输入-必填
    •  textarea-必填
    •  日期-必填
    •  所需时间
    •  标签-必填
    •  提前输入-必填
    •  选择-必填
    •  复选框列表-必填
    •  单选列表-必填
  •  可编辑的数据表
  •  自定义CSS /主题

日期和时间使用ngx-bootstrap,请确保在使用日期和时间控件时安装它。另外,将此样式引用包括到index.html标头中。 <link rel="stylesheet" href="https://unpkg.com/ngx-bootstrap/datepicker/bs-datepicker.css"> 注意:在解决方案中删除此依赖项。

安装:

# NPM
$ npm install angular-inline-editors --save
  1. 要包含在项目中的依赖项:
  • Bootstrap(3.3.7+)-样式。推荐Bootstrap 4
  • FontAwesome-图标。
  • ngx-bootstrap用于日期,时间和日期时间编辑器。

向模块添加角度内联编辑器

遵循Angular的原理是基于Modules的,您可以在需要时使用想要的东西。您可以单独添加每个angular-inline编辑器。这意味着您可以根据需要添加模块。

如何使用

添加模块

import {InputEditorModule} from 'angular-inline-editors';

@NgModule({
  imports: [
    InputEditorModule.forRoot()
  ]
})

添加更多

import {InputEditorModule} from 'angular-inline-editors';
import { SelectEditorModule } from 'angular-inline-editors';

@NgModule({
  imports: [
    InputEditorModule.forRoot(),
    SelectEditorModule.forRoot()
    
  ]
})

在你的HTML上

<input-editor label="First Name" id="txtname" [(ngModel)]="name" type="text" placeholder="Enter First Name" (onSave)="sampleClick()"></input-editor>

在您的组件上

name:string;

sampleClick(){
  console.log('clicked!!');
}