角度2のインラインエディタ

Question

私は現在、プロジェクトでtypescriptで角度2を使用しています。 私はangularjsのためのいくつかのインラインエディタを調べて、angular-xeditableを見つけました。しかし、このプラグインはangularjsのためのものです。

これを角度2で使用する方法はありますか？または、xのような別の代替案2のために編集可能

編集ボタン付きのインラインエディタが必要です。公式のを待っている間

PS私はあなたがこの機能を行うAngular2で独自のコンポーネントを構築することができ

Answer 1

角度（ないangularjsモジュール）の一部ではありません。このため、JSインラインエディタプラグインを望んでいません成分。

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ファイル：このブログ（https://medium.com/front-end-hacking/inline-editing-with-angular2-58b43cc2aba）

typescriptファイルから

Here is a full working example

<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日

Iだけの出版GitHubには、上記のコードに基づいて、angle2の編集インラインの基本ライブラリがあります。このライブラリには、テキスト、テキストエリア、パスワード、および選択（https://github.com/Caballerog/ng2-inline-editor）のタイプの入力例が含まれています。