Kompilieren Winkel 2 HTML aus Zeichenfolge

Question

Sagen wir, ich habe diese Zeichenfolge in der Datenbank.

Ich möchte, dass es genauso funktioniert, als würde ich die gleiche Zeichenfolge direkt in meinen Code eingeben. Ich versuchte dies:

<p [innerHTML]="databaseEntry"></p> 
<span (click)="someFunction()">click here</span> 

Beide Linien visuell das gleiche machen, aber klicken Sie arbeitet Funktion auf der zweiten nur, weil in der Tat die erzeugte HTML unterscheidet.

<span>click here</span> 
<span _ngcontent-qdv-71="" data-vivaldi-spatnav-clickable="1">click here</span> 

Es ist, weil der erste nicht von eckigen regeneriert wird.

Also ist die Frage, was anstelle von innerHTML zu verwenden. Ich habe einige Antworten dafür gefunden, aber keine berücksichtigte zufällige Eingabezeichenfolge oder fehlte etwas Entscheidendes.

Answer 1

Ich stimme Milad zu, dass eine Direktive ein guter Ansatz sein kann, aber ich habe keine Lösung gefunden, so dass vielleicht jemand schlauer ist.

Aber wir fanden eine Abhilfe:

innerText = <string>this.sanitizer.bypassSecurityTrustHtml(this.parseMessage(databaseEntry)); 

Aber als Sie benutzerdefinierte Zuhörer hinzu:

setTimeout(() => { 
    try { 
     document.getElementById(IDinDatabaseentryhtmlstring).addEventListener("click",() => this.myClick(LINKinDatabaseEntryHtmlString)); 
    } 
    catch (e) { 
     console.log("cannot find element"); 
     return; 
     } 
}, 0) 

Answer 2

Sie sollten eine Direktive erstellen, die Text als Eingabe akzeptiert und dann kompiliert und eine Komponente erstellt und sie dann in das Element einfügt.

Werfen Sie einen Blick auf ngIf und das ist etwas similar.