為什麼我的 CSS 不適用於 Angular 中的 InnerHTML 內容？

為什麼在 Angular 中 CSS 不應用於 InnerHTML 內容？

在 Angular 中，使用 innerHTML 屬性將 HTML 內容注入到視圖中問題：樣式可能無法如預期地套用。這是由於 Angular 的封裝機制，它可以防止外部樣式幹擾元件內的內容。

了解 Shadow DOM 封裝

預設情況下，Angular 使用類比封裝，建立影子 DOM 並隔離元件樣式。因此，在元件範圍之外、由innerHTML注入的HTML中定義的樣式將被忽略。

解決方案：將封裝變更為None

要解決此問題，您可以透過在元件中將封裝設為 None 來覆蓋 Angular 的封裝。這將允許將來自外部來源的樣式應用於注入的 HTML 內容。

這是一個範例：

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

透過將封裝設定為 None，我們停用 Angular 的影子 DOM 並允許 CSS在註入的 HTML 中生效。因此，注入的 HTML div 中的文字將以藍色背景色呈現。

以上是為什麼我的 CSS 不適用於 Angular 中的 InnerHTML 內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！