내부에 스타일이 작동하지 않습니다.각진 HTML

내부에 스타일이 작동하지 않습니다.각진 HTML

이 질문에는 이미 다음과 같은 답이 있습니다.

각도 2 - 내부HTML 스타일 (12개 답변)

마감됨5년 전에.

저는 html을 내부 Html로 제 의견에 전달하고 있습니다.아래는 나의 견해입니다.

<div [innerHTML]="someHtmlCode"></div>

아래 코드를 전달하면 정상적으로 작동합니다.

this.someHtmlCode = "<div><b>This is my HTML.</b></div>"

색상이 포함된 아래 코드를 전달하면 작동하지 않습니다.

 this.someHtmlCode = '<div style="background-color: blue;"><b>This is my HTML.</b></div>';

당신이 받는 이 행동은 정상입니다.추가된 클래스innerHTML기본적으로 캡슐화가 다음과 같기 때문에 무시됩니다.Emulated즉, 각도는 스타일이 구성요소의 내부 및 외부를 가로채는 것을 방지합니다.캡슐화를 다음으로 변경해야 합니다.None사용자 구성요소에 있습니다.이렇게 하면 원하는 곳에서 클래스를 정의할 수 있습니다. 내부styles또는 별도로.css,.scss또는.less스타일시트(상관 없음)와 Angular가 자동으로 DOM에 추가합니다.

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>';
  }
}

저도 같은 문제에 직면했지만 아래 링크를 읽고 해결책을 찾았고 파이프를 사용하지 않고 해결되었습니다.

이것이 당신에게 도움이 되기를 바랍니다.

https://netbasal.com/angular-2-security-the-domsanitizer-service-2202c83bd90

저는 인라인 스타일 대신에 그 스타일을 수업에 넣었습니다.

사용 중인지 확실하지 않음class당신이 선택하든 말든, 하지만 여기 플런커 데모가 있습니다.

HTML:

this.someHtmlCode = '<div class="demo"><b>This is my HTML.</b></div>'

클래스 정의demo글로벌 루트 CSS 파일에서, 일반적으로 그것은 불립니다.styles.scss.

CSS:

.demo{
    background-color: blue;
}

언급URL : https://stackoverflow.com/questions/44210786/style-not-working-for-innerhtml-in-angular