Angular4에서 HTML 콘텐츠를 바인딩할 때 경고를 해결하는 방법

이 글에서는 주로 Angular4에서 HTML 콘텐츠를 바인딩할 때 발생하는 경고를 처리하는 방법을 소개합니다. 이 글에서는 샘플 코드를 통해 이를 매우 자세하게 소개합니다. 이 글은 필요한 모든 사람의 학습이나 참조를 위해 아래 편집기를 따릅니다. . 와서 함께 배워보세요. 그것이 모두에게 도움이 되기를 바랍니다.

머리말

우리 모두 알고 있듯이 웹 프런트엔드 개발에서는 특히 콘텐츠 관리 시스템(CMS: 콘텐츠 관리)에서 백엔드 또는 동적 접합의 일부 HTML 문자열을 페이지 DOM 디스플레이에 동적으로 바인딩해야 하는 경우가 종종 있습니다. 시스템), 그러한 요구는 어디에나 있습니다. 그런데 최근 Angular4에서 HTML 콘텐츠를 바인딩할 때 경고가 나타났는데, 관련 정보를 검색해 보니 문제가 해결되었습니다. 더 이상 고민하지 않고 자세한 소개를 살펴보겠습니다.

HTML 콘텐츠 바인딩

일반적인 방법으로 바인딩하면 이런 경고가 나타날 수 있으며

<p [innerHTML]="Catcha" ></p>
--------------------------------------- 
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

페이지에 아무것도 표시되지 않습니다.

인터넷에서 좀 찾아봤는데 옮기려면 설명서를 작성해야 한다고 해서 너무 귀찮아서 공식 홈페이지에서 방법도 찾았어요.
bypassSecurityTrustHtml 이를 사용하여 설치 변환을 수행합니다.

반환된 결과의 콘텐츠 또는 콘텐츠 필드를 변환합니다. 물론, BypassSecurityTrustHtml을 사용하려면 DomSanitizer 서비스 삽입에 의존해야 합니다.

import { DomSanitizer } from '@angular/platform-browser';

export class myPage1{
 constructor(private sanitizer: DomSanitizer) {
 }

 onInit():void{
  this.Catcha = this.sanitizer.bypassSecurityTrustHtml('要进行转换的内容');
  // 这里比如返回的一个html内容，或是其它如一张 svg 的图等，用上面代码转一下就可以了，就不会那那个错误了。
 }
}

관련 권장 사항:

CSS 스타일 표시를 위한 샘플 코드 in Angular4

완전한 Angular4 FormText 구성 요소의 구현 방법에 대한 자세한 설명

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

위 내용은 Angular4에서 HTML 콘텐츠를 바인딩할 때 경고를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!