問題陳述：
將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中文網其他相關文章！
