Bezpieczna wartość powinna używać [właściwość] = bind po obejściu zabezpieczeń przez DomSanitizer

Jak mówi komunikat o błędzie, usunięty kod HTML należy dodać za pomocą powiązania właściwości:
<pre class="lang-ts prettyprint-override">

<p [innerHTML]="massTimingsHtml">

<pre class="lang-ts prettyprint-override">

constructor(private domSanitizer:DomSanitizer) {

 this.massTimingsHtml = this.getInnerHTMLValue();

}

getInnerHTMLValue(){

 return this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings);

}

Przykład StackBlitz
https://stackblitz.com/edit/angular-bmxbmy

(na podstawie Plunker Swapnil Patshcha - patrz komentarze poniżej)

Potrzebujesz sanitize () safevalue w ten sposób:

this.domSanitizer.sanitize(SecurityContext.HTML,this.domSanitizer.bypassSecurityTrustHtml(this.parishDetail.mass_timings));

Otrzymałem ten błąd podczas używania iframe, więc naprawiłem go za pomocą

[src]

, jak pokazano poniżej:

Zaimportuj to

:

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

constructor(private sanitizer: DomSanitizer, ....other DI){}

W pliku ts

getSafeUrl() {

 return this.sanitizer.bypassSecurityTrustResourceUrl(this.url); 

}

W pliku

html

<iframe [src]="getSafeUrl()" frameborder="0" *ngIf="url"></iframe>

Ta metoda jest dość czasochłonna, ponieważ będzie wywoływać funkcję wiele razy, więc lepiej jest wyczyścić adres URL wewnątrz lifeCycleHooks, takich jak

ngOnInit ()

.
Możesz również użyć potoków, aby poprawić wydajność:

<div [innerHtml]="htmlValue | byPassSecurity">

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";

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

 name: 'byPassSecurity'

})

export class ByPassSecurityPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform (value: string): SafeHtml {

 return this.sanitizer.bypassSecurityTrustHtml(value);

 }

}

Otrzymałem ten sam błąd podczas używania MATHJAX w kątowej 7. Rozwiązałem problem z poniższą transformacją potoku. 100% działa dobrze
// Oczyść potok HTML

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";

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

 name: 'sanitizeHtml'

})

export class SanitizeHtmlPipe implements PipeTransform { constructor(private _sanitizer: DomSanitizer) {

 } transform(value: string): SafeHtml {

 return this._sanitizer.sanitize(SecurityContext.HTML, this._sanitizer.bypassSecurityTrustHtml(value))

 }

}

Moje rozwiązanie za pomocą rury.

HTML

<div [innerHtml]="htmlValue | byPassSecurity">

Trąbka

import { Pipe, PipeTransform, SecurityContext } from "@angular/core";

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

 name: 'byPassSecurity'

})

export class ByPassSecurityPipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform (value: string): SafeHtml {

 return this.sanitizer.bypassSecurityTrustHtml(value);

 }

}