Angular2：Contenteditable div不能按預期工作

服務器存儲的html文本綁定到contenteditable div時。該html不會被處理和渲染，而是呈現爲原樣。Angular2：Contenteditable div不能按預期工作

例如，來自服務器的html文本以下的文本呈現爲文本而不是html。

<br>---------- Forwarded message ----------<br>From: Someone &lt;<a href="mailto:[email protected]" target="_blank">[email protected]</a>&gt;

下面是當前的代碼：

HTML代碼：

<div class="description-input" 
      placeholder="Enter Description" 
      ion-content 
      contenteditable="true" 
      [(contenteditableModel)]="description"> 
     </div>

的Javascript：

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

來源

2017-03-20 Shyamal Parikh

可能的[angular 2 html binding]重複（http://stackoverflow.com/questions/31548311/angular-2-html-binding） – Abdel

如果你想獲得的HTML，然後使用innerHTML代替012在refreshView

this.elementRef.nativeElement.innerHTML = this.model

同樣在onEdit：

var value = this.elementRef.nativeElement.innerHtml

參見

https://developer.mozilla.org/en/docs/Web/API/Element/innerHTML

來源

2017-03-20 14:47:31 yurzui

儘管這個工程很好，但您直接訪問DOM並不好：/ – Abdel

@Abdel如果你不打算使用服務器端渲染和利用Angulars WebWorkers，那麼我不會看到這個問題https://angular.io/docs/ts/latest/guide/ngmodule.html#！＃declare-directives-and-components – yurzui

這很好用，但'onEdit'再次將html轉換爲文本。 –

請避免DOM的直接操縱，因爲它違背了日e角2心態。

您是否嘗試過使用innerHTML指令？ see

來源

2017-03-20 14:52:25 Abdel

Angular2：Contenteditable div不能按預期工作

回答

相關問題