Angular 2 内联编辑器

Question

我目前在我的项目中使用 angular 2 和 typescript。我研究了一些 angularjs 的内联编辑器并找到了 angular-xeditable .但是这个插件是针对 angularjs 1 的。

有什么方法可以将它与 angular 2 一起使用吗？或者另一种选择，例如 x-editable for angular 2

我只想要带有编辑按钮的内联编辑器。

P.S 我不想要 js 内联编辑器插件，它不会成为 angular 的一部分(不是 angularjs 模块)

Answer 1

您可以在 Angular2 中构建自己的组件，在等待官方组件的同时执行此功能。

Here is a full working example来自这个博客(https://medium.com/front-end-hacking/inline-editing-with-angular2-58b43cc2aba)

typescript 文件:

import {Component, Output, Provider, forwardRef, EventEmitter, ElementRef, ViewChild, Renderer} from '@angular/core';
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";

const INLINE_EDIT_CONTROL_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {
        useExisting: forwardRef(() => InlineEditComponent),
        multi: true
    });

@Component({
    selector: 'inline-edit',
    providers: [INLINE_EDIT_CONTROL_VALUE_ACCESSOR],
    styleUrls: ['./inline-edit.component.css'],
    templateUrl: './inline-edit.component.html'
})
export class InlineEditComponent implements ControlValueAccessor, ngOnInit{
    @ViewChild('inlineEditControl') inlineEditControl;
    @Output() public onSave:EventEmitter<any> = new EventEmitter();

    private _value:string = '';
    private preValue:string = '';
    private editing:boolean = false;

    public onChange:any = Function.prototype;
    public onTouched:any = Function.prototype;

    get value(): any { return this._value; };

    set value(v: any) {
        if (v !== this._value) {
            this._value = v;
            this.onChange(v);
        }
    }

    constructor(element: ElementRef, private _renderer:Renderer) {}

    // Required for ControlValueAccessor interface
    writeValue(value: any) {
        this._value = value;
    }

    // Required forControlValueAccessor interface
    public registerOnChange(fn:(_:any) => {}):void {this.onChange = fn;}

    // Required forControlValueAccessor interface
    public registerOnTouched(fn:() => {}):void {this.onTouched = fn;};

    edit(value){
        this.preValue = value;
        this.editing = true;

        setTimeout( _ => this._renderer.invokeElementMethod(this.inlineEditControl.nativeElement, 'focus', []));
    }

    onSubmit(value){
        this.onSave.emit(value);
        this.editing = false;
    }

    cancel(value:any){
        this._value = this.preValue;
        this.editing = false;
    }

HTML 文件:

<div id="inlineEditWrapper">

    <!-- Editable value -->
    <a (click)="edit(value)" [hidden]="editing">{{ value }}</a>

    <!-- inline edit form -->
    <form  #inlineEditForm="ngForm" class="inlineEditForm form-inline" (ngSubmit)="onSubmit(value)" [hidden]="!editing">
        <div class="form-group">

            <!-- inline edit control  -->
           <input #inlineEditControl class="form-control" [(ngModel)]="value"/>

            <!-- inline edit save and cancel buttons -->
           <span>
                <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-ok"></span></button>
                <button class="btn btn-default" (click)="cancel(value)"><span class="glyphicon glyphicon-remove"></span></button>
           </span>

        </div>
    </form>
</div>

2016 年 10 月 8 日更新

我刚刚在 GitHub 上发布了一个基本库，用于基于上述代码在 angular2 中进行内联编辑，其中包括一个输入类型的示例:文本、文本区域、密码和选择(https://github.com/Caballerog/ng2-inline-editor)。