집 >웹 프론트엔드 >CSS 튜토리얼 >Angular4에서 콘텐츠를 표시하는 방법에 대한 CSS 스타일 샘플 코드

Angular4에서 콘텐츠를 표시하는 방법에 대한 CSS 스타일 샘플 코드

小云云원래의: 2017-12-08 13:20:201783검색

이 글은 주로 Angular 4에서 콘텐츠를 표시하는 방법에 대한 CSS 스타일에 대한 관련 정보를 소개합니다. 이 글은 샘플 코드를 통해 이를 매우 자세하게 소개하며, 이를 필요로 하는 모든 사람의 학습 또는 학습 가치를 제공합니다. 아래 지침을 따르세요. 본 글의 본문을 시작하기에 앞서, 먼저Angular2에서 페이지에 태그된 텍스트를 출력하는 관련 내용을 살펴보겠습니다. XSS 문제를 체계적으로 방지하기 위해 Angular는 기본적으로 모든 값을 신뢰할 수 없는 것으로 처리합니다. 속성(Properties), DOM 요소 속성(Attribte), CSS 클래스 바인딩, 보간 표현식 등을 통해 템플릿에서 DOM에 값을 삽입하는 경우 Angular는 이러한 값을 삭제하고 신뢰할 수 없는 값을 인코딩합니다.

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>

[innerHTML]="htmlSnippet"

이 속성은 HTML 태그를 식별할 수 있지만 태그의 속성 값은 식별할 수 없습니다

문제 발견

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

예:

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

<p [innerHTML]="content"></p>

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

솔루션

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

HtmlPipe 클래스 작성

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

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

@NgModule({
 declarations: [
 HtmlPipe
 ]
})

innerHtml에 파이프 이름 추가

<p [innerHTML]="content | html"></p>

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

Angular4에서 콘텐츠를 표시하는 방법에 대한 CSS 스타일 샘플 코드

관련 기사