Угловой 2 встроенный редактор

Question

В настоящее время я использую угловой 2 с машинописным текстом в своем проекте. Я исследовал некоторые встроенные редакторы для angularjs и нашел angular-xeditable. Но это плагины для angularjs 1.

Есть ли способ использовать это с угловыми 2? Или другая альтернатива, такая как x-редактируемая для углового 2

Я хочу просто встроенный редактор с кнопкой редактирования.

PS я не хочу JS встроенный редактор плагина для этого, не будет частью углового (не angularjs модуля)

Answer 1

Вы можете создать свой собственный компонент в Angular2, которые делают эту функцию в то время как ждать чиновник компонент.

Here is a full working example из этого блога (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> 

Update 10/08/2016

Я только из опубл в GitHub - базовая библиотека для редактирования inline в угловом2, основанная на приведенном выше коде, который включает пример со вводом типов: текст, текстовое поле, пароль и выбор (https://github.com/Caballerog/ng2-inline-editor).