如何使用視圖封裝在 Angular 中設定 InnerHTML 內容的樣式？

使用視圖封裝在Angular 中設定InnerHTML 樣式

在AngularHT 中，設定innerHTML 屬性可讓您在元件元件中渲染動態視圖。但是，在嘗試設定此註入內容的樣式時，您可能會遇到問題。

問題：使用innerHTML 注入包含內聯樣式的HTML 內容時，可能無法套用樣式。例如，以下程式碼不會將背景顏色樣式套用至注入的 div 元素：

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

解決方案： Angular 預設情況下採用稱為「類比」檢視封裝的概念。這可以防止元件內定義的樣式幹擾元件外部定義的樣式。若要允許注入內容的內聯樣式，您需要將封裝變更為 None。

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

將封裝屬性設為 None，Angular 將不再阻止套用內聯樣式。這允許您在元件的樣式陣列和注入的 HTML 內容中定義樣式，Angular 會自動將它們套用到 DOM。

以上是如何使用視圖封裝在 Angular 中設定 InnerHTML 內容的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！