Angular 2内容可编辑

Question

在 Angular 2 中，我如何使用可编辑的 div 进行双向数据绑定？

 <div class="editable" contenteditable="true">
    <h1>Text Field</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra felis in sem porta feugiat.</p>
 </div>

原文由 Codrut Tapu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我已经改编了 Isetty 的答案以与 Angular 2.0 的发布版本一起使用，现在它可用了。除了使用发布版本之外，我还添加了一个 keyup 事件并使用了 textContent 而不是 innerText，因为它更适合我的应用程序。您可能希望更改这些内容。

 import {Directive, ElementRef, Input, Output, EventEmitter, OnChanges} from "@angular/core";

@Directive({
    selector: '[contenteditableModel]',
    host: {
        '(blur)': 'onEdit()',
        '(keyup)': 'onEdit()'
    }
})

export class ContentEditableDirective implements OnChanges {
    @Input('contenteditableModel') model: any;
    @Output('contenteditableModelChange') update = new EventEmitter();

    constructor(
        private elementRef: ElementRef
    ) {
        console.log('ContentEditableDirective.constructor');
    }

    ngOnChanges(changes) {
        console.log('ContentEditableDirective.ngOnChanges');
        console.log(changes);
        if (changes.model.isFirstChange())
            this.refreshView();
    }

    onEdit() {
        console.log('ContentEditableDirective.onEdit');
        var value = this.elementRef.nativeElement.innerText
        this.update.emit(value)
    }

    private refreshView() {
        console.log('ContentEditableDirective.refreshView');
        this.elementRef.nativeElement.textContent = this.model
    }
}

原文由 David 发布，翻译遵循 CC BY-SA 3.0 许可协议