innerHTML が Angular のスタイルを尊重しないのはなぜですか?それを修正するにはどうすればよいですか?

Angular で innerHTML がスタイルを考慮しない

Angular では、innerHTML を使用して HTML を表示すると、特に CSS を適用しようとする場合にスタイルの問題が発生する可能性がありますHTML コード内のスタイル。この現象は、Angular のデフォルトのカプセル化モード (エミュレート) により、外部スタイルがコンポーネントの内部スタイルに干渉するのを防ぐために発生します。

解決策:

この問題を解決し、内部スタイルを有効にするにはinnerHTML の場合は、カプセル化モードを [なし] に切り替える必要があります。これにより、Angular は内部ソースと外部ソースの両方からスタイルを適用できるようになります。

1. @angular/core から ViewEncapsulation 列挙型をインポートします。
2. Angular コンポーネントで、encapsulation プロパティを 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>

このアプローチにより、innerHTML を通じてレンダリングされた HTML に CSS スタイルを適用できるようになりました。 Angular アプリ内で。

以上がinnerHTML が Angular のスタイルを尊重しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。