Angular 2：ContenteditableModel：雙向數據綁定

我能夠從contenteditableModel指令發出事件，但我無法接收數據'@Input（'contenteditableModel'）model：any;'我一直未定義。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，火狐和Safari獲取設置爲0

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

來源

2017-06-04 Chris Tarasovs

你爲什麼不用ckeditor來做這個？ – Arjun

如果我正確理解你，如果有人改變'文本'它沒有得到更新的段落？ – Skeptor

如果有人更新了innerHTML，那麼它不會綁定回 –

我改變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()告訴我們，如果我們分配首次的價值。根據你的代碼，你只想在第一次改變時更新文本。這是錯誤的。我認爲我們根本不需要擔心它。

來源

2017-06-17 06:31:40 Skeptor

Angular 2：ContenteditableModel：雙向數據綁定

回答

相關問題