Bagaimana untuk Menggayakan Kandungan InnerHTML dalam Sudut Menggunakan Enkapsulasi Paparan?

Menggayakan InnerHTML dalam Sudut Menggunakan Enkapsulasi Paparan

Dalam Sudut, menetapkan sifat innerHTML membolehkan anda memaparkan kandungan HTML secara dinamik dalam paparan komponen. Walau bagaimanapun, anda mungkin menghadapi masalah semasa cuba menggayakan kandungan yang disuntik ini.

Masalah: Apabila menggunakan innerHTML untuk menyuntik kandungan HTML yang termasuk gaya sebaris, gaya mungkin tidak digunakan. Sebagai contoh, kod berikut tidak akan menggunakan gaya warna latar belakang pada elemen div yang disuntik:

<code class="typescript">this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';</code>

Penyelesaian: Angular menggunakan konsep yang dipanggil pengkapsulan paparan "dicontohi" secara lalai. Ini menghalang gaya yang ditakrifkan dalam komponen daripada mengganggu gaya yang ditakrifkan di luarnya. Untuk membenarkan gaya sebaris untuk kandungan yang disuntik, anda perlu menukar enkapsulasi kepada Tiada.

<code class="typescript">@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})</code>

Dengan menetapkan sifat enkapsulasi kepada Tiada, Angular tidak akan lagi menghalang gaya sebaris daripada digunakan. Ini membolehkan anda menentukan gaya kedua-dua dalam tatasusunan gaya komponen dan dalam kandungan HTML yang disuntik, dan Angular akan menggunakannya secara automatik pada DOM.

Atas ialah kandungan terperinci Bagaimana untuk Menggayakan Kandungan InnerHTML dalam Sudut Menggunakan Enkapsulasi Paparan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!