Angular의 InnerHTML에 스타일이 적용되지 않는 이유는 무엇입니까?

Angular의 innerHTML에서 스타일이 작동하지 않음

문제 설명:

HTML 코드를 innerHTML로 뷰에 전달할 때, 코드 내에 정의된 스타일이 적용되지 않습니다. HTML 코드에 인라인 스타일이 포함되어 있지 않으면 올바르게 표시됩니다. 그러나 background-color와 같은 인라인 스타일이 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!