為什麼樣式不套用於 Angular 中的 InnerHTML？

Angular 中的innerHTML 樣式不起作用

問題陳述：

將HTML 程式碼當作ininner ，程式碼中定義的樣式不會被套用。如果 HTML 程式碼不包含任何內聯樣式，則它會正確顯示。但是，當內聯樣式（例如背景顏色）新增至 HTML 程式碼時，它們將被忽略。

根本原因：

此行為的結果Angular 的預設元件封裝被設定為「模擬」。模擬封裝可防止 CSS 樣式影響元件內部和外部的元素。

解決方案：

要允許應用innerHTML 中定義的樣式，組件的封裝必須改為「無」。這可以透過向應用程式添加以下附加程式碼來實現：

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 {
  private someHtmlCode = '';

  constructor() {
    this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>';
  }
}

將封裝設為“無”，innerHTML 中定義的樣式將自動新增至DOM，從而允許它們應用於由HTML 程式碼創建的元素。

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