Paparkan kandungan lain dan innerHTML secara serentak

Question

Saya mempunyai komponen yang membuat label berdasarkan data yang diluluskan seperti ini:

<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>

Saya mahu memaparkan ikon di sebelah setiap teks apabila diperlukan.

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

Jika saya meletakkan teg ikon di antara setiap teg, ia akan digantikan dengan data innerHTML.

Adakah terdapat cara untuk memaparkan ikon (menggunakan ng-content atau sesuatu yang serupa, kerana saya tidak mahu menulis ikon html dalam setiap elemen) dan data innerHTML?

Saya baru dalam dunia Angular jadi saya cuba belajar. Sebarang bantuan amatlah dihargai.

Terima kasih.

Answer 1

Nampaknya isu anda bukan khusus Sudut, tetapi tingkah laku JavaScript.

innerHTML Mendapat atau menetapkan teg HTML atau XML yang terkandung dalam elemen. Jadi ini bermakna ia menggantikan apa sahaja yang ada di tempat pertama. (https://developer.mozilla.org/en-US /docs/Web/API/Element/innerHTML)

Saya rasa anda boleh cuba menggunakan insertAdjacentHTML() sebaliknya - ini sepatutnya menambahkan HTML pada elemen yang sudah ada dalam DOM. Semak sintaks dan contoh di sini: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML