Mengapa CSS Saya Tidak Digunakan pada Kandungan InnerHTML dalam Sudut?

Mengapa CSS Tidak Digunakan pada Kandungan InnerHTML dalam Sudut?

Dalam Sudut, menyuntik kandungan HTML ke dalam paparan menggunakan pose sifat innerHTML masalah: penggayaan mungkin tidak digunakan seperti yang diharapkan. Ini disebabkan oleh mekanisme enkapsulasi Angular, yang menghalang gaya luaran daripada mengganggu kandungan dalam komponen.

Memahami Pengekapsulan DOM Bayangan

Secara lalai, Angular menggunakan Enkapsulasi Tertiru, mencipta DOM bayangan dan mengasingkan gaya komponen. Oleh itu, gaya yang ditakrifkan di luar skop komponen, dalam HTML yang disuntik oleh innerHTML, akan diabaikan.

Penyelesaian: Tukar Enkapsulasi kepada Tiada

Untuk menyelesaikan isu ini, anda boleh mengatasi enkapsulasi Angular dengan menetapkan enkapsulasi kepada Tiada dalam komponen anda. Ini akan membenarkan gaya daripada sumber luaran digunakan pada kandungan HTML yang disuntik.

Berikut ialah contoh:

<code class="typescript">import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'example',
  styles: ['.demo {background-color: blue}'],
  template: '<div [innerHTML]="someHtmlCode"></div>',
  encapsulation: ViewEncapsulation.None,
})
export class Example {
  someHtmlCode = `<div class="demo"><b>This is my HTML.</b></div>`;
}</code>

Dengan menetapkan enkapsulasi kepada Tiada, kami melumpuhkan DOM bayangan Angular dan membenarkan CSS daripada dalam HTML yang disuntik untuk berkuat kuasa. Akibatnya, teks dalam div HTML yang disuntik akan dipaparkan dengan warna latar belakang biru.

Atas ialah kandungan terperinci Mengapa CSS Saya Tidak Digunakan pada Kandungan InnerHTML dalam Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!