내 CSS가 Angular의 InnerHTML 콘텐츠에 적용되지 않는 이유는 무엇입니까?

Angular의 InnerHTML 콘텐츠에 CSS가 적용되지 않는 이유는 무엇입니까?

Angular에서는 innerHTML 속성 포즈를 사용하여 HTML 콘텐츠를 뷰에 삽입합니다. 문제: 스타일이 예상대로 적용되지 않을 수 있습니다. 이는 외부 스타일이 구성 요소 내의 콘텐츠를 방해하는 것을 방지하는 Angular의 캡슐화 메커니즘 때문입니다.

Shadow DOM 캡슐화 이해

기본적으로 Angular는 에뮬레이트된 캡슐화를 사용합니다. Shadow DOM을 생성하고 구성요소 스타일을 분리합니다. 따라서 innerHTML에 의해 삽입된 HTML 내에서 구성 요소 범위 외부에 정의된 스타일은 무시됩니다.

해결 방법: 캡슐화를 없음으로 변경

이 문제를 해결하려면 구성 요소에서 캡슐화를 없음으로 설정하여 Angular의 캡슐화를 재정의할 수 있습니다. 이렇게 하면 삽입된 HTML 콘텐츠에 외부 소스의 스타일을 적용할 수 있습니다.

예는 다음과 같습니다.

<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 {
  someHtmlCode = `<div class="demo"><b>This is my HTML.</b></div>`;
}</code>

캡슐화를 None으로 설정하면 Angular의 Shadow DOM을 비활성화하고 CSS를 허용합니다. 삽입된 HTML 내에서 적용됩니다. 결과적으로 삽입된 HTML div 내의 텍스트는 파란색 배경색으로 렌더링됩니다.

위 내용은 내 CSS가 Angular의 InnerHTML 콘텐츠에 적용되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!