[英]Ionic 2 LoadingController include custom content
I want to use custom components inside the content option of the LoadingController of my Ionic 2 project but when the loading comes up the browser console shows me the message: 我想在Ionic 2项目的LoadingController的content选项中使用自定义组件,但是当加载完成时,浏览器控制台向我显示以下消息:
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
And the component is not showing, making test i realise that using any other TAG that was not standard HTML TAG throws this error, how i can use angular 2 security for bypass the error? 而且该组件未显示,测试使我意识到使用其他不是标准HTML TAG的其他TAG会引发此错误,我如何使用angular 2安全性绕过该错误? what i whant is:
我想的是:
this.loadingController.create({
spinner: 'hide',
content: `
<div>
<some-component></some-component>
<h3>a message...</h3>
</div>`
})
Actually, you cannot do that according to the doc: 实际上,您不能根据文档执行以下操作:
content ----> string ----> The HTML content for the loading indicator.
content ---->字符串---->加载指示符的HTML内容。
So you must pass the plain string
HTML content like this: 因此,您必须像这样传递纯
string
HTML内容:
content: `
<div class="my-spinner">
<div class="my-spinner-box"></div>
</div>`,
This works for me: 这对我有用:
//----------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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.