Açısal 2: ContenteditableModel: 2 yönlü veri bağlama

Question

ContenteditableModel yönergesinden bir olay yayınlayabiliyorum ancak '@Input (' contenteditableModel ') modelini alamıyorum: any;' undefined almaya devam ediyorum.

contenteditableModelChange çalışıyor, ancak nasıl kullanılacağını anlamaya mümkün değildi olarak değil contenteditableModel

benim verilerini güncellemek yolu this.elementRef.nativeElement.textContent güncelleyerek olduğunu [innerHTML]

Bu yönerge on this guy code: tabanlı ancak açısal 2.0 için yeniden oluşturulmuştur. Bu arada

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

kimse textContent özelliği (value yerine) ve girdi olayını kullanarak veri bağlama kendi eşdeğer mülk ve etkinlik oluşturun önermek, ben zaten bu plunker üzerinde denedim ve bir sorun olduğunu IE, Firefox ve Safari imleç 0

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

Answer 1

olarak ayarlanmış olur ben buna ngOnChanges değiştirdi:

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

İyi çalışıyor. Docs göre https://plnkr.co/edit/VW4IJvcv1xjtBKTglWXT?p=preview

:

Plnkr ilk kez değer atama eğer isFirstChange() söyler. Kodunuza göre, metni yalnızca ilk kez değiştiğinde güncellemek istersiniz. Hangisi yanlış. Benim düşüncem, bunun için hiç endişelenmemize gerek yok.