Question

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

有没有办法使用角度2？或另一种替代方案，例如x-editable for angular 2

我想要简单的内联编辑器和编辑按钮。

P.S我不想要js内联编辑器插件，这不会是角度的一部分（不是angularjs模块）

Answer 1

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

来自此博客的{p> 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月10日更新

我刚刚在GitHub中发布了一个基本库，它基于上面的代码在angular2中编辑内联，其中包含一个输入类型的示例：text，textarea，password和select（https://github.com/Caballerog/ng2-inline-editor）。

Angular 2内联编辑器

1 个答案: