이 글은 주로 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='font-size:30px'>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 스타일이 표시됩니다.
관련 권장사항
Angular는 프로젝트에 정의된 json 파일을 가져옵니다
양식 확인 기능을 완료하기 위한 AngularJS 소개
위 내용은 Angular4에서 콘텐츠를 표시하는 방법에 대한 CSS 스타일 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!