angular - Ionic 2 LoadingController inkluderar anpassat innehåll
Jag vill använda anpassade komponenter i innehållsinställningen för LoadingController i mitt Ionic 2-projekt, men när laddningen visas visar webbläsarkonsolen meddelandet:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
Och komponenten visas inte, när jag testar inser jag att användning av någon annan TAG som inte är en standard HTML-TAG ger detta fel, hur kan jag använda Angular 2-säkerhet för att kringgå felet? Det jag vill är:
this.loadingController.create({
spinner: 'hide',
content: `
<div>
<some-component></some-component>
<h3>a message...</h3>
</div>`
})
Svar #1
Faktiskt, du kan inte göra det enligt dokumentet:
innehåll ----> sträng ----> HTML-innehållet för laddningsindikatorn.
Så du måste skicka vanlig string HTML-innehåll på detta sätt:
content: `
<div class="my-spinner">
<div class="my-spinner-box"></div>
</div>`,
Svar #2
Det här fungerar för mig:
//----------imports----------
import { DomSanitizer } from '@angular/platform-browser';
//----------variables----------
safeHtml: any;
//----------constructor----------
constructor(public loadingCtrl: LoadingController, private sanitizer: DomSanitizer)
//----------your function----------
let svg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox...whatever..</svg>';
// you can also add text BEFORE sanitizing
let html = svg + '<div class="loadingText">' + this.translate.instant('common.Loading') + '</div>';
this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(html);
var loading = this.loadingCtrl.create({
spinner: 'hide',
content: this.safeHtml
});
loading.present();
