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：双向数据绑定

回答

相关问题