내 innerHTML이 Angular의 스타일을 따르지 않는 이유는 무엇이며 어떻게 해결할 수 있나요?

Angular에서 스타일을 준수하지 않는 innerHTML

Angular에서 HTML을 표시하기 위해 innerHTML을 사용하면 특히 CSS를 적용하려고 할 때 스타일 문제가 발생할 수 있습니다. HTML 코드 내의 스타일. 이 동작은 Angular의 기본 캡슐화 모드(에뮬레이트됨)가 외부 스타일이 구성 요소의 내부 스타일을 방해하는 것을 방지하기 때문에 발생합니다.

해결책:

이 문제를 해결하고 내부에서 스타일을 활성화하려면 innerHTML을 사용하려면 캡슐화 모드를 없음으로 전환해야 합니다. 이를 통해 Angular는 내부 및 외부 소스 모두에서 스타일을 적용할 수 있습니다.

1. @angular/core에서 ViewEncapsulation 열거형을 가져옵니다.
2. Angular 구성 요소에서 캡슐화 속성을 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!