Angular 4에서 CSS 스타일 표시

이번에는 Angular 4에서 CSS 스타일을 표시할 때의 주의사항을 알려드리겠습니다. 다음은 실제 사례이므로 살펴보겠습니다.

본 글의 본문을 시작하기에 앞서, 먼저Angular2에서 페이지에 태그된 텍스트를 출력하는 관련 내용을 살펴보겠습니다. XSS 문제를 체계적으로 방지하기 위해 Angular는 기본적으로 모든 값을 신뢰할 수 없는 것으로 처리합니다. 속성(Property), DOM 요소 속성(Attribte), CSS 클래스바인딩 또는 보간표현식 등을 통해 템플릿에서 DOM에 값이 삽입되는 경우, Angular는 이러한 값을 삭제하고 신뢰할 수 없는 값을 인코딩합니다.

rreerrree

이 속성은 HTML 태그를 인식할 수 있지만 태그

의 속성 값은 인식할 수 없습니다. 문제 발견

Angular에는 표시할 콘텐츠를 설정하는 innerHTML 속성이 있다는 것은 누구나 알고 있지만, 콘텐츠에 CSS 스타일이 포함되어 있으면 스타일 효과를 표시할 수 없습니다.

예:

h3>Binding innerHTML</h3>
<p>Bound value:</p>
<p
class="e2e-inner-html-interpolated">{{htmlSnippet}}</p>
<p>Result of binding to innerHTML:</p>
<p
class="e2e-inner-html-bound" [innerHTML]="htmlSnippet"></p>

Hello World만 표시되고 글꼴은 30px이 아니므로 CSS 스타일이 적용되지 않습니다.

솔루션

콘텐츠를 변환하려면 파이프를 사용자 정의하세요. 아래 코드를 보세요.

HtmlPipe 클래스 작성

[innerHTML]="htmlSnippet"

필수 모듈에 파이프 HtmlPipe를 도입하세요

public content: string = "<p style=&#39;font-size:30px&#39;>Hello Angular</p>";
<p [innerHTML]="content"></p>

innerHtml에 파이프 이름 추가

import {Pipe, PipeTransform} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
@Pipe({
 name: "html"
})
export class HtmlPipe implements PipeTransform{
 constructor (private sanitizer: DomSanitizer) {
 }
 transform(style) {
 return this.sanitizer.bypassSecurityTrustHtml(style);
 }
}

콘텐츠의 CSS 스타일이 표시됩니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 Angular 4에서 CSS 스타일 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!