Angular 2:ContenteditableModel:双向数据绑定

Question

我能够从contenteditableModel指令发出一个事件,但我无法接收数据'@Input('contenteditableModel')模型:any;' 我一直都没有定义.

contenteditableModelChange工作正常,但不是contenteditableModel

我更新数据的方法是更新this.elementRef.nativeElement.textContent,因为我无法弄清楚如何使用[innerHTML]

该指令基于此人员代码:但是为角度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属性(而不是值)和输入事件设置我自己的等效属性和事件数据绑定,我已经在这个plunker上尝试了它,并且在IE,Firefox和Safari上存在游标问题设置为0

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

Answer 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()告诉我们是否是第一次分配该值。根据您的代码，您只想在第一次更改时更新文本。这是错误的。我认为我们根本不需要担心这个问题。