typescript - HTML-kodning i Angular 4

Jag behöver din hjälp med HTML-kodning i Angular 4. Jag har några produktposter i databasen, med fältet fullDescription i detta format:

<div align="justify"><span>

Med <div *ngIf="product" [innerHTML]="product.fullDescription"></div> får jag följande resultat:

<div align="justify"><span>

som text. Är det möjligt att rendera detta som innerHtml och inte som text?

Tack i förväg.

Svar #1

I din komponents klass kan du använda en HTML-entity-avkodningsfunktion på detta sätt:

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

och i mallen använd:

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

Svar #2

Jag har gjort det genom att implementera pipe.

Skapa en component.ts-fil och i den filen:

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);
  }
}

Sedan i app.module.ts:

  • import { SanitizeHtmlPipe } from './pagecontent/pagecontent.component';

  • lägg till SanitizeHtmlPipe inuti declarations[]

Slutligen i component.html:

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

Det är allt. :) :) :)

Relaterade artiklar