為什麼我的 innerHTML 不尊重 Angular 中的樣式，我該如何修復它？

innerHTML 不尊重Angular 中的樣式

在Angular 中，使用innerHTML 顯示HTML 可能會帶來樣式問題，特別是在樣式問題嘗試套用CSS 時HTML 程式碼中的樣式。出現此行為的原因是 Angular 的預設封裝模式（模擬）可防止外部樣式幹擾元件的內部樣式。

解決方案：

要解決此問題並在內部啟用樣式innerHTML，需要將封裝模式切換為None。這允許 Angular 應用來自內部和外部來源的樣式：

1. 從 @angular/core 匯入 ViewEncapsulation 枚舉。
2. 在 Angular 元件中，將封裝屬性設為 ViewEncapsulation。無。
3. 使用元件模板中的內聯樣式或外部 CSS/SCSS/LESS 檔案定義樣式。 Angular 會自動將它們加入 DOM 中。

範例：

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

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

透過這個方法，您現在可以將CSS 樣式應用到透過innerHTML 渲染的HTML在你的Angular 應用程式中。

以上是為什麼我的 innerHTML 不尊重 Angular 中的樣式，我該如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！