typescript - การเข้ารหัส Html ใน angular 4

ฉันต้องการความช่วยเหลือของคุณในการเข้ารหัส HTML ใน Angular 4 ฉันมีบันทึกผลิตภัณฑ์บางรายการในฐานข้อมูล โดยมีฟิลด์ fullDescription ในรูปแบบนี้:

<div align="justify"><span>

การใช้ <div *ngIf="product" [innerHTML]="product.fullDescription"></div> ฉันได้รับผลลัพธ์ดังต่อไปนี้:

<div align="justify"><span>

เป็นข้อความ สามารถแสดงสิ่งนี้เป็น innerHtml ไม่ใช่เป็นข้อความได้หรือไม่?

ขอบคุณล่วงหน้า

คำตอบ #1

ในคลาสของคอมโพเนนต์ของคุณ คุณสามารถใช้ฟังก์ชันถอดรหัสเอนทิตี HTML แบบนี้ได้:

toHTML(input) : any {
    return new DOMParser().parseFromString(input, "text/html").documentElement.textContent;
}

และในแม่แบบใช้:

<div *ngIf="product" [innerHTML]="toHTML(product.fullDescription)"></div>

คำตอบ #2

ฉันได้ทำมันโดยการใช้ pipe แล้ว

สร้างไฟล์ component.ts และในไฟล์นั้น:

import { Pipe, PipeTransform, SecurityContext } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'sanitizeHtml', pure: false })
export class SanitizeHtmlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(data): SafeHtml {
    return this.sanitizer.sanitize(SecurityContext.HTML, data);
  }
}

จากนั้นใน app.module.ts:

• import { SanitizeHtmlPipe } จาก './pagecontent/pagecontent.component';

• เพิ่ม SanitizeHtmlPipe ภายใน declarations[]

สุดท้ายใน component.html:

<span [innerHTML]="data | sanitizeHtml"></span>

ก็แค่นั้น. :) :) :)