Angular 2内联编辑器

Question

我目前正在我的项目中使用带有打字稿的angular 2.我已经研究了angularjs的一些内联编辑器,并发现了 angular-xeditable.但是这个插件适用于angularjs 1.

是否有任何方法可以使用角2？或者另一种替代方案,例如x-editable for angular 2

我想简单的内联编辑器与编辑按钮.

PS我不希望js内联编辑器插件为此而不是角度的一部分(不是angularjs模块)

Answer 1

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

这是此博客的完整工作示例（ https://medium.com/front-end-hacking/inline-editing-with-angular2-58b43cc2aba）

打字稿文件：

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>

更新 10/08/2016

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