Angular 2：ContenteditableModel：双向数据绑定

contenteditableModelChange工作正常,但不是contenteditableModel

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

该指令基于on this guy code：
但重建角度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