Angular4에서 CSS 스타일을 표시하는 샘플 코드

이 글에서는 주로 Angular 4에서 콘텐츠를 표시하는 방법에 대한 CSS 스타일에 대한 관련 정보를 소개합니다. 이 글에서는 샘플 코드를 통해 이를 매우 자세하게 소개합니다. 이는 모든 사람의 공부나 업무에 대한 특정 참조 및 학습 가치를 가지고 있습니다. 아래를 따라야 합니다. 함께 배워봅시다. 그것이 모두에게 도움이 되기를 바랍니다.

머리말

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

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 스타일이 적용되지 않습니다.

Solution

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

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 FormText 구성 요소의 구현 방법에 대한 자세한 설명

Angular4 양식 응답 함수 샘플 분석

Angular4에서 프로젝트 준비 및 환경 구축 작업

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