Angular 2 Direktiven und DOM-Manipulation

Question

Wir kämpfen darum, eine Lösung dafür zu finden.

Ich versuche, das innere HTML eines Elements durch HTML zu ersetzen, das aus einer anderen Bibliothek generiert wurde. Scheint einfach, aber nicht mit Angular 2 natürlich. Ich verpacke Google-Prettify-Code-Skript grundsätzlich in eine Angular 2-App-Direktive.

in der Komponente HTML, die meine Prettify-Anweisung enthält, möchte ich etwas wie das hinzufügen.

<pre dg-prettify> 
    &lt;div class=&quot;foobar&quot;&gt; 
    &lt;div&gt;Hello World&lt;/div&gt; 
    &lt;/div&gt; 
</pre> 

Dann in meinem verschönern Richtlinie muss ich die Innerhtml der Pre-Tag nehmen und es an die externe Bibliothek übergeben verarbeitet werden. Ich werde eine decodierte HTML-Struktur zurückbekommen, die dann in den inneren HTML-Code des pre-Tags eingefügt werden muss, um den ursprünglichen Inhalt zu ersetzen.

Answer 1

Wenn die Komponente HTML-Inhalte statisch sind, so etwas wie dies funktionieren sollte:

@Directive({ 
    selector: '[dg-prettify]' 
}) 
export class Prettify { 
    constructor(private elRef:ElementRef) {} 
    ngOnInit() { 
    let innerHTML = this.elRef.nativeElement.innerHTML; 
    console.log(innerHTML); 
    // call 3rd-party library 
    let newHtml = someExternalLibraryFunction(innerHtml); 
    this.elRef.nativeElement.innerHTML = newHtml; 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `<pre dg-prettify> 
    &lt;div class=&quot;foobar&quot;&gt; 
    &lt;div&gt;Hello World&lt;/div&gt; 
    &lt;/div&gt; 
</pre>`, 
    directives: [Prettify] 
}) 
export class AppComponent { 
    constructor() { console.clear(); 
} 

Plunker

Wenn die Komponente HTML-Inhalte dynamisch ist, dann, dass der Inhalt als String in der Richtlinie übergeben Geben Sie die Eigenschaft property ein und implementieren Sie lifecycle hookngOnChange(), um die innerHTML zu aktualisieren, sobald sich der Inhalt ändert.