innerHtml und Direktiven in angular 5

Question

Ich bin einschließlich HTML-Inhalt, der angular-font-awesome<fa> Tags in meine .html-Datei enthält mit <div [innerHtml]="fa-containing-content">.

Mein Problem ist, dass die fa-Tags nicht in i-Tags konvertiert werden, so dass kein Symbol angezeigt wird. Ich vermute, dass der Code, der Fa in das eigentliche Icon konvertiert, nach der Aufnahme nicht ausgeführt wird, aber ich weiß nicht, wie ich es angehen soll.

Um klar zu sein, angular-font-genial funktioniert gut für mich sonst. Das Problem tritt nur auf, wenn ich die fa-Tags innerhalb des Inhalts habe, der über innerHtml enthalten ist.

VERSUCH 1:

test: string ="<fa name='heart'></fa>"; <div class="test" [innerHtml]="test"></div>

OUTPUT:

<div _ngcontent-c1="" class="test"></div>

VERSUCH 2: Verwendung von safeHtml pipe

test: string ="<fa name='heart'></fa>"; <div class="test" [innerHtml]="test | safeHtml"></div>

OUTPUT:

<div _ngcontent-c1="" class="test"><fa name="heart"></fa></div>

Das Problem bleibt, dass der <fa> Tag nicht umgewandelt wird, das heißt, die <i> durch Winkel-font-awesome nicht eingeführt wird.

Wie kann ich angular-font-awesome bekommen, um nach dem Einbinden von innerHtml wieder darüber zu laufen?

Answer 1

Leider kann man nach der HTML-Verarbeitungsphase keine Winkelkomponente erzeugen. Der HTML-Code wird zur Laufzeit generiert, ebenso wie die innere HTML-Injektion, so dass die Komponente niemals erkennt, dass sie injiziert wurde.

Vielleicht könnten Sie versuchen, so etwas wie ..

public applyFA: boolean = true; 

<div class="test"><fa *ngIf="applyFA" [name]="'heart'"></fa></div> 

Mindestens sollte die fa Komponente richtig in die Vorlage erzeugt werden.