Angular 2：如何检索对注入的 html 所做的更改？

Question

我从我创建的对象中注入 HTML，而不是使用管道绕过 angular 安全性来显示输入字段、文本区域等。

我正在注入一个输入字段、一些文本和一个您可以编辑的 <p contenteditable="true"> change me </p>。

3) 如何在用户更新内部并将其推回对象时跟踪更改？

如果用户更改了 [innerHTML]="item.htmldata" 里面的 HTML 有没有办法跟踪它？

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

我运行通过ngFor循环并通过angular绑定数据 [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
  }
}

笨蛋：http://plnkr.co/edit/ADeAEz81a07Cl2yrDGqQ?p=preview

Answer 1

用此代码替换您的 sanitizedHtmlProperty。

示例代码

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

Plunker

编辑

您可以使用 Blur 和 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

编辑 2

这是跟踪更改的代码Plunker

Angular 2：如何检索对注入的 html 所做的更改？

Angular 2: How retrieve the changes that are done to an injected html?

angularjs

object

render

inject