Angular 2: ContenteditableModel: 2-Wege-Datenbindung

Question

Ich kann ein Event aus der contenteditableModel-Direktive ausgeben, aber ich kann die Daten nicht empfangen '@Input (' contenteditableModel ') model: any;' Ich werde immer undefiniert.

contenteditableModelChange funktioniert gut, aber nicht contenteditableModel

Die Art, wie ich meine Daten aktualisieren ist durch die this.elementRef.nativeElement.textContent aktualisieren, da ich nicht in der Lage war, herauszufinden, wie verwenden [innerHTML-]

Diese Richtlinie basiert on this guy code: aber für angular 2.0 umgebaut.

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

By the way, wenn jemand meine eigene entsprechende Eigenschaft und Event empfehlen die textcontent Eigenschaft Datenbindung einzurichten mit (anstelle des Wertes) und das Eingabeereignis, ich habe bereits versucht, es auf dieser Plunker und es gibt ein Problem, das Cursor auf IE, Firefox und Safari auf 0

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

Answer 1

gesetzt wird geändert ich ngOnChanges dazu:

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

Es funktioniert gut.

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

Nach docs: isFirstChange() sagt uns, wenn wir den Wert zum ersten Mal zuweisen. Gemäß Ihrem Code möchten Sie den Text nur aktualisieren, wenn er sich zum ersten Mal ändert. Was falsch ist. Meiner Meinung nach brauchen wir uns überhaupt keine Sorgen zu machen.