Angular에서 InnerHTML에 스타일을 적용하는 방법은 무엇입니까?

Angular에서 InnerHTML 스타일링

Angular에서 innerHTML을 설정할 때 스타일이 제대로 적용되지 않는 문제가 발생할 수 있습니다. 이는 기본적으로 innerHTML 콘텐츠에서 스타일이 상속되는 것을 방지하는 Angular의 캡슐화 메커니즘 때문입니다.

이 문제를 해결하려면 구성 요소의 캡슐화 속성을 "없음"으로 변경할 수 있습니다. 이렇게 하면 구성 요소에 정의된 스타일을 innerHTML 콘텐츠에 적용할 수 있습니다.

방법은 다음과 같습니다.

<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 파일에 있으며 Angular는 innerHTML 콘텐츠를 렌더링할 때 이를 자동으로 DOM에 추가합니다.

위 내용은 Angular에서 InnerHTML에 스타일을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!