innerHtml for angular2를 사용하여 CSS 렌더링하기

innerHTML을 사용하여 HTML 템플릿을 렌더링하고 SQL에서 HTML + CSS 문자열을 렌더링하려고합니다.innerHtml for angular2를 사용하여 CSS 렌더링하기

템플릿 문자열 예 :

<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>

가 지금은 HTML의 벌금을 렌더링하지만이 스타일 태그을 삭제하고 단지 내부의 텍스트를 렌더링하는 것 같습니다.

HTML 렌더링 부분 : 렌더링의

예

<div [innerHtml]="templateBody"> 
</div>

Home.component.ts 부품 :

@Component({ 
    selector: "home", 
    templateUrl: `client/modules/home/home.component.html`, 
    encapsulation: ViewEncapsulation.Emulated 
}) 
export class HomeComponent implements OnInit{ 
    templateBody: string; 
.....other code 
}

나는 캡슐화를 시도 : ViewEncapsulation를 .Emulated/None 등, 인라인 CSS를 시도하고 나는 다음을 추가하려고 시도했다 : host >>> p 태그의 infront. 그것들은 모두 같은 것을 표현합니다.

제안 사항?

출처

2016-10-10 Shaun Groenewald

이 bypassSecurityTrustHtml 및 SafeHTML에서와 DomSanitizer 함께 사용 참조

DEMO : https://plnkr.co/edit/eBlzrIyAl0Il1snu6WJB?p=preview

import { DomSanitizer } from '@angular/platform-browser' @Pipe({ name: 'safeHtml'}) export class SafeHtmlPipe implements PipeTransform { constructor(private sanitized: DomSanitizer) {} transform(value) { console.log(this.sanitized.bypassSecurityTrustHtml(value)) return this.sanitized.bypassSecurityTrustHtml(value); } } @Component({ selector: 'my-app', template: ` <div [innerHtml]="html | safeHtml"></div> `, }) export class App { name:string; html: safeHtml; constructor() { this.name = 'Angular2' this.html = `<html xmlns="http://www.w3.org/1999/xhtml"> <head><title>Template Name</title><style type="text/css"> p{ color:red; }</style> </head> <body> <h1>#headding#</h1> <p style="color:red;">#paragraph#</p><a href="#url#">#urltext#</a> </body> </html>`; } }

출처

2016-10-10 13:26:28 micronyks

덕분에, 자사는 완벽하게 작동. –

환영합니다 @ShaunGroenewald – micronyks

을 삽입하고 https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html에 설명 된대로 bypassSecurityTrustHtml(value: string) : SafeHtml을 HTML 콘텐츠에 적용하여 Angular2가 콘텐츠를 신뢰할 수 있음을 인식하게하십시오.

는 아래 그림과 같이 In RC.1 some styles can't be added using binding syntax

출처

2016-10-10 13:22:24

내가했던 모든 파이프없이 단지로 내 구성 요소에 DomSanitizer 및 SafeHtml을 주입하고 내 마크 업 st에서 bypassSecurityTrustHtml을 실행합니다. 반지. 이로 인해 내 인라인 스타일이 구문 분석되지 않게 할 수있었습니다.

import { Component, OnInit } from '@angular/core'; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: "foo", 
    templateUrl: "./foo.component.html" 
}) 

export class FooComponent { 
    html: SafeHtml; 
    constructor(private sanitizer: DomSanitizer) { 
     this.html = this.sanitizer.bypassSecurityTrustHtml('<span style="color:##0077dd">this works</span>'); 
    } 
}

및 foo.component.html 템플릿

는

<div [innerHtml]="html"></div>

출처

2018-02-06 19:21:52

설명이 누락되어이 게시물의 품질이 낮게 표시되었습니다. 당신의 대답을 확장하십시오. –

@DerekBrown 설명이 추가되었습니다. –

innerHtml for angular2를 사용하여 CSS 렌더링하기

답변

관련 문제