> 웹 프론트엔드 > CSS 튜토리얼 > Angular의 InnerHTML에 스타일이 적용되지 않는 이유는 무엇입니까?

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

Barbara Streisand
풀어 주다: 2024-10-27 14:35:02
원래의
932명이 탐색했습니다.

Why Are Styles Not Applied to InnerHTML in Angular?

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿