Angulaire 2: Comment récupérer les modifications apportées à un fichier HTML injecté?

Question

J'ai injectent HTML à partir d'un objet que j'ai créé et que l'aide d'un tuyau, je passe par la sécurité angulaire pour afficher les champs d'entrée, zone de texte, etc ..

Je suis injecter un champ de saisie, un texte et un <p contenteditable="true"> change me </p> que vous pouvez éditer.

3) Comment effectuer le suivi des modifications lorsque l'utilisateur met à jour l'intérieur et le reporte sur l'objet?

Si l'utilisateur modifie le code HTML à l'intérieur [innerHTML]="item.htmldata" est-il un moyen de le suivre?

obj: Array<any> = [ 
    { htmldata: '<div> <strong> There should be a input field below </strong> <input type="text" value="search" /></div>' }, 
    { htmldata: '<div> <strong> me to, how are you </strong></div>'} 
] 

Je courais à travers une boucle ngFor et la liaison des données par angulaire [innerHTML] = "item.htmldata"

<div *ngFor="let item of obj" > 

{{item.htmldata | json }} 
<div [innerHTML]="item.htmldata" | safeHtml></div> 
<br /> 
<hr> 
</div> 


**SafeHTML pipe** 
import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer, SafeResourceUrl, SafeUrl} from '@angular/platform-browser'; 


DomSanitizer 
@Pipe({name: 'safeHtml'}) 
export class Safe { 
    constructor(private sanitizer: DomSanitizer){} 

    transform(style) { 
    return this.sanitizer.bypassSecurityTrustHtml(style); 
    //return this.sanitizer.bypassSecurityTrustStyle(style); 
    // return this.sanitizer.bypassSecurityTrustXxx(style); - see docs 
    } 
} 

Plunker: http://plnkr.co/edit/ADeAEz81a07Cl2yrDGqQ?p=preview

Answer 1

Remplacez votre sanitizedHtmlProperty par ce code .

Exemple de code

public get sanitizedHtmlProperty() : SafeHtml { 
    return this._sanitizer.bypassSecurityTrustHtml(this._originalHtmlProperty); 
} 

Plunker

Modifier

Vous pouvez utiliser Blur et keyup

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

Reference

Edit 2

Code est là pour le suivi des changements Plunker