角2：ContenteditableModel：双方向データバインディング

Question

contenteditableModelディレクティブからイベントを発行できますが、データを受信できません'@Input（' contenteditableModel '）model：any;私は未定義になっています。

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

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()は教えてくれる。あなたのコードによると、初めての変更があった場合にのみテキストを更新したいと考えています。どちらが間違っている。私の意見では、それについて全く心配する必要はありません。