कोणीय 2: ContentitableModel: 2-तरफा डेटा बाध्यकारी

Question

मैं संतुष्ट मॉडल मॉडल से एक ईवेंट उत्सर्जित करने में सक्षम हूं लेकिन मैं डेटा '@ इनपुट (' 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 संपत्ति (मूल्य के बजाय) और इनपुट घटना का उपयोग कर databinding स्थापित करने के लिए सुझाव देते हैं, मैं पहले से ही यह इस plunker पर की कोशिश की और वहाँ एक मुद्दा है कि आईई, फ़ायरफ़ॉक्स और सफारी पर कर्सर को 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() हमें बताता है कि अगर हम पहली बार के लिए मान निर्दिष्ट कर रहे हैं। आपके कोड के अनुसार, आप केवल पाठ को अपडेट करना चाहते हैं यदि इसका पहला समय बदल जाए। क्या गलत है। मेरी राय है कि हमें इसके बारे में चिंता करने की ज़रूरत नहीं है।