Angular 2：ContenteditableModel：2路数据绑定

Posted 2023-02-23

【中文标题】Angular 2：ContenteditableModel：2路数据绑定

【英文标题】：Angular 2: ContenteditableModel: 2-way data binding

【发布时间】：2017-11-05 13:08:00

【问题描述】：

我能够从 contenteditableModel 指令发出一个事件，但我无法接收数据 ' @Input('contenteditableModel') model: any;'我一直不确定。

contenteditableModelChange 工作正常，但不是 contenteditableModel

我更新数据的方式是更新 this.elementRef.nativeElement.textContent，因为我不知道如何使用 [innerhtml]

此指令基于on this guy code： 但为 Angular 2.0 重建。

export class pageContent
    <p
 contenteditable="true"

(contenteditableModelChange)="runthis($event)"
[contenteditableModel]="text"


></p>

    public text:any = 'ddddd';
    constructor()
    runthis(ev)
        this.text  = ev
            console.log('updated done ev', ev)
            console.log('text now should be ', this.text)
    



    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
        
    

顺便说一句，如果有人建议使用 textContent 属性（而不是 value）和 input 事件来设置我自己的等效属性和事件数据绑定，我已经在这个 plunker 上尝试过它，并且在 IE 上存在光标问题， Firefox 和 Safari 设置为 0

http://plnkr.co/edit/KCeKTPu8dJI0O1nVMPfb?p=preview

【问题讨论】：

你为什么不使用ckeditor呢？

如果我理解正确，如果有人更改 text 它不会在段落中更新？

如果有人更新了innerHTML而不是yes它不会被绑定

你看到我的解决方案了吗

【参考方案1】：

我把ngOnChanges改成了这个：

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

它工作正常。

Plnkr：https://plnkr.co/edit/VW4IJvcv1xjtBKTglWXT?p=preview

根据文档：isFirstChange() 告诉我们是否是第一次分配值。根据您的代码，您只想在第一次更改时更新文本。这是错误的。我认为我们根本不需要担心它。