Trình chỉnh sửa nội tuyến góc 2

Question

Tôi hiện đang sử dụng góc 2 với các bản ghi trong dự án của tôi. Tôi đã nghiên cứu một số trình chỉnh sửa nội tuyến cho angularj và tìm thấy angular-xeditable. Nhưng plugin này dành cho angularjs 1.

Có cách nào để sử dụng tính năng này với góc 2 không? Hoặc một phương án khác như x-chỉnh sửa được cho góc 2

Tôi muốn chỉnh sửa nội tuyến đơn giản bằng nút chỉnh sửa.

PS tôi không muốn js Plugin biên tập inline cho việc này sẽ không phải là một phần của góc (không phải mô-đun angularjs)

Answer 1

Bạn có thể xây dựng thành phần của riêng bạn trong Angular2 mà làm chức năng này trong khi chờ đợi một quan chức thành phần.

Here is a full working example từ blog này (https://medium.com/front-end-hacking/inline-editing-with-angular2-58b43cc2aba)

nguyên cảo file:

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 file:

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

Cập nhật 10/08/2016

Tôi chỉ của publ ished trong GitHub một thư viện cơ bản để chỉnh sửa nội tuyến trong angular2 dựa trên đoạn mã trên, bao gồm một ví dụ với đầu vào của các loại: văn bản, văn bản, mật khẩu và chọn (https://github.com/Caballerog/ng2-inline-editor).