Ionic 2 加载控制器包括自定义内容

Question

我想在我的 Ionic 2 项目的加载控制器的内容选项中使用自定义组件，但是当加载出现时，浏览器控制台向我显示消息：

WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

并且组件没有显示，进行测试我意识到使用任何其他不是标准 HTML TAG 的 TAG 会引发此错误，我如何使用 angular 2 安全性绕过错误？ 我抱怨的是：

    this.loadingController.create({
        spinner: 'hide',
        content: `
        <div>
            <some-component></some-component>
            <h3>a message...</h3>
        </div>`
    })

Answer 1

实际上，根据文档，您不能这样做：

内容---->字符串----> 加载指示器的 HTML 内容。

因此，您必须像这样传递纯string HTML 内容：

content: `
      <div class="my-spinner">
        <div class="my-spinner-box"></div>
      </div>`,

Answer 2

这对

我有用：

//----------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();