Angular에서 innerHTML 속성을 사용하여 바인딩하는 방법

Angular에서 innerHTML 속성을 사용하여 바인딩하는 방법

2022-06-01 last update

6 minutes reading Angular

소개


Angular 2+는 HTML의 [innerHTML] 속성 바인딩을 지원합니다.보간 값을 사용하면 문자열로 간주됩니다.
본고에서 어떻게 사용하는지[innerHTML]와 사용 주의사항을 소개할 것입니다.

선결 조건


본문을 계속 읽으려면 다음이 필요합니다.
  • Angularinterpolationproperty-binding를 잘 아는 것도 도움이 될 수 있다.
  • 1단계 - innerHTML 사용


    이 문서에서는 일반 텍스트와 HTML 엔티티 및 요소로 구성된 구성 요소string가 포함된 구성 요소를 사용하고 있다고 가정합니다.
    export class ExampleComponent {
      htmlStr: string = 'Plain Text Example &amp; <strong>Bold Text Example</strong>';
    }
    
    이 문자열에 삽입 값을 사용하는 템플릿을 생각해 보겠습니다.
    <div>{{ htmlStr }}</div>
    
    컴파일하면 이 코드는 다음과 같은 결과를 생성합니다.

    Plain Text Example &amp; <strong>Bold Text Example</strong>


    HTML 엔티티와 HTML 요소는 표시되지 않습니다.
    이제 이 문자열에서 [innerHTML] 속성을 사용하여 귀속된 템플릿을 생각해 보겠습니다.
    <div [innerHTML]="htmlStr"></div>
    
    다시 컴파일하면 이 코드는 다음과 같은 결과를 생성합니다.

    Plain Text Example & Bold Text Example


    HTML 엔티티와 HTML 요소가 이미 표시됩니다.

    2단계 - 제한 사항 이해


    HTML 구현은 일반적으로 XSS(크로스 사이트 스크립트)를 도입할 수 있습니다.표시되는 HTML에는 보안 문제가 있는 악성 스크립트가 포함될 수 있습니다.
    XSS 주소 지정 방법 중 하나는 HTML 요소 및 속성의 종류를 알려진 보안 요소 및 속성 그룹으로 제한하는 것입니다.
    배후에서 [innerHTML] Angular DomSanitizer 를 사용하며, 승인된 HTML 요소와 속성 목록을 사용합니다.
    참고: 승인된 HTML 요소 및 속성의 전체 목록은 html_sanitizer.ts 에서 볼 수 있습니다.
    이것은 [innerHTML] 값 사용<script><style> 표시 및 style 속성을 제한합니다.사용[innerHTML]을 선택할 때 이 제한을 기억하십시오.

    결론


    본고는 Angular 2+의 [innerHTML] 속성 귀속을 소개한다.그러면 문자열에 포함된 HTML 태그가 표시됩니다.
    Angular에 대한 자세한 내용은 our Angular topic page 의 연습 및 프로그래밍 항목을 참조하십시오.