Afficher d'autres contenus et innerHTML simultanément

Question

J'ai un composant qui restitue les étiquettes en fonction des données transmises comme ceci :

<ng-container>
<ng-container [ngSwitch]="tag">
    <p    *ngSwitchCase="'p'"  [innerHTML]="_getString()"></p>
    <h1   *ngSwitchCase="'h1'" [innerHTML]="_getString()"></h1>
    <h2   *ngSwitchCase="'h2'" [innerHTML]="_getString()"></h2>
    <h3   *ngSwitchCase="'h3'" [innerHTML]="_getString()"></h3>
    <h4   *ngSwitchCase="'h4'" [innerHTML]="_getString()"></h4>
    <span *ngSwitchCase="'span'" [innerHTML]="_getString()"></span>
    <code *ngSwitchCase="'code'" [innerHTML]="_getString()"></code>
    <time *ngSwitchCase="'time'" [innerHTML]="_getString()"></time>
</ng-container>

Je souhaite afficher une icône à côté de chaque texte en cas de besoin.

<span *ngIf="icon" class="css-{{icon}}" role="presentation"></span>

Si je mets la balise icon entre chaque balise, elle est remplacée par les données innerHTML.

Existe-t-il un moyen de restituer l'icône (en utilisant ng-content ou quelque chose de similaire, car je ne veux pas écrire l'icône en HTML dans chaque élément) et les données innerHTML ?

Je suis nouveau dans le monde angulaire, donc j'essaie d'apprendre. Toute aide serait grandement appréciée.

Merci.

Answer 1

Il semble que votre problème ne soit pas spécifique à Angular, mais au comportement de JavaScript.

innerHTML Obtient ou définit la balise HTML ou XML contenue dans l'élément. Cela signifie donc qu’il remplace tout ce qui existait en premier lieu. (https://developer.mozilla.org/en-US /docs/Web/API/Element/innerHTML)

Je pense que vous pourriez essayer d'utiliser insertAdjacentHTML() à la place - cela devrait ajouter du HTML à un élément qui est déjà dans le DOM. Vérifiez la syntaxe et les exemples ici : https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML